Csstransform3D slide effect implementation step explanation _ javascript skills

3D slide effects must not be unfamiliar. As for the form of representation, they are generally stuck in the tradition. Next we will introduce you to use css3transform with js and html to implement 3D slide effects. Js

The Code is as follows:

$ (Function (){
Var length = $ (". container a"). length;
Var $ items = $ (". container ");
$ Items. on ("transitionend", function (event ){
$ Items. removeClass ("trans ");
});
$ (". Container a"). each (function (index, value ){
Var $ child = $ (this );
If (index = 0 ){
$ Child. addClass ("current showing ");
} Else if (index = 1 ){
$ Child. addClass ("left showing ");
} Else if (index = 2 ){
$ Child. addClass ("out-left ");
} Else if (index = (length-2 )){
$ Child. addClass ("out-right ");
} Else if (index === (length-1 )){
$ Child. addClass ("right showing ");
} Else {
$ Child. addClass ("hiding ");
};


$ Child. click (function (){
Var $ item = $ (this );
// Next item
Var $ nextItem = (index = (length-1 ))? $ Items. eq (0): $ items. eq (index + 1 );
// Previous item
Var $ preItem = (index = 0 )? $ Items. eq (length-1): $ items. eq (index-1 );
Var $ rightItem;
If (index = 0 ){
$ RightItem = $ items. eq (length-2 );
} Else if (index = 1 ){
$ RightItem = $ items. eq (length-1 );
} Else {
$ RightItem = $ items. eq (index-2 );
}
Var $ leftItem;
If (index = length-2 ){
$ LeftItem = $ items. eq (0 );
} Else if (index = length-1 ){
$ LeftItem = $ items. eq (1 );
} Else {
$ LeftItem = $ items. eq (index + 2 );
}
// Current item click, return
If ($ item. hasClass ("current ")){
Return false;
} Else if ($ item. hasClass ("left ")){
// Center move right
$ PreItem. attr ("class", "trans right showing ");
// Left move center
$ Item. attr ("class", "trans current showing ");
// Right item move out
$ RightItem. attr ("class", "trans out-right ");
// Next move left
$ NextItem. attr ("class", "trans left showing ");
// Left ready
$ LeftItem. attr ("class", "out-left ");
} Else if ($ item. hasClass ("right ")){
// Center move left
$ NextItem. attr ("class", "trans left showing ");
// Right move center
$ Item. attr ("class", "trans current showing ");
// Left item clear
$ LeftItem. attr ("class", "trans out-left ");
// Previous move right
$ PreItem. attr ("class", "trans right showing ");
// Right ready
$ RightItem. attr ("class", "out-right ");
};
});
});
});

Html

The Code is as follows:

Slideshow