Js
Copy codeThe 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 Copy codeThe Code is as follows: <Head>
<Title> slideshow </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Link rel = "stylesheet" type = "text/css" href = "slide.css">
</Head>
<Body>
<Div class = "container">
<Div class = "wapper">
<A href = "javascript: void (0)"> </a>
<A href = "javascript: void (0)"> </a>
<A href = "javascript: void (0)"> </a>
<A href = "javascript: void (0)"> </a>
<A href = "javascript: void (0)"> </a>
<A href = "javascript: void (0)"> </a>
<A href = "javascript: void (0)"> </a>
<A href = "javascript: void (0)"> </a>
<A href = "javascript: void (0)"> </a>
<A href = "javascript: void (0)"> </a>
</Div>
</Div>
<Script type = "text/javascript" src = "jquery-1.8.3.js"> </script>
<Script type = "text/javascript" src = "slide. js"> </script>
</Body>
</Html>
Css Copy codeThe Code is as follows: body, div {margin: 0; padding: 0 ;}
. Container {width: 100%; height: pixel PX; position: relative ;}
. Container. wapper {margin: 0 auto; width: 480px; height: 300px; position: relative;-webkit-transform-style: preserve-3d;-webkit-perspective: 1000px; -moz-transform-style: preserve-3d;-moz-perspective: 1000px ;}
. Container a {display: block; position: absolute; left: 0; top: 0;-webkit-box-shadow: 0px 1px 1px rgba (255,255,255, 0.4 ); -moz-box-shadow: 0px 1px rgba (255,255,255, 0.4); box-shadow: 0px 1px 1px rgba (255,255,255, 0.4); cursor: pointer ;}
. Container a img {width: 480px; height: 300px; display: block; border: 0 ;}
. Container. current {z-index: 2 ;}
. Container. left {-webkit-transform: translateX (-350px) translateZ (-200px) rotateY (45deg);-moz-transform: translateX (-350px) translateZ (-200px) rotateY (45deg); z-index: 1 ;}
. Container. right {-webkit-transform: translateX (350px) translateZ (-200px) rotateY (-45deg);-moz-transform: translateX (350px) translateZ (-200px) rotateY (-45deg); z-index: 1 ;}
. Showing {opacity: 1; visibility: visible ;}
. Hiding {opacity: 0; visibility: hidden ;}
. Out-right {-webkit-transform: translateX (-effecpx) translateZ (-300px) rotateY (45deg);-moz-transform: translateX (-effecpx) translateZ (-300px) rotateY (45deg); z-index: 1; opacity: 0; visibility: hidden ;}
. Out-left {-webkit-transform: translateX (450px) translateZ (-300px) rotateY (-45deg);-moz-transform: translateX (450px) translateZ (-300px) rotateY (-45deg); z-index: 1; opacity: 0; visibility: hidden ;}
. Trans {-webkit-transition: all 1 s bytes-in-out;-moz-transition: all 1 s bytes-in-out; transition: all 1 s bytes-in-out ;}