JS
Copy Code code as follows:
$ (function () {
var length = $ (". Container a"). Length;
var $items = $ (". Container a");
$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 Code code as follows:
<title>slideshow</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<link rel= "stylesheet" type= "Text/css" href= "Slide.css" >
<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>
CSS
Copy Code code as follows:
body,div{margin:0;padding:0;}
. container{width:100%;height:450px; 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 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 ( -450px) Translatez ( -300px) Rotatey (45deg);-moz-transform:translatex (- 450px) 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 1s ease-in-out;-moz-transition:all 1s ease-in-out;transition:all 1s ease-in-out;}
