js
[javascript]
$(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");
};
});
});
});
$(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
[html]
<html>
<head>
<title>slideshow</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://www.php1.cn/"> </head>
<body>
<div class="container">
<div class="wapper">
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225608.jpg" alt="1" /></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225808.jpg" alt="2" /></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225977.jpg" alt="3"/></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225569.jpg" alt="4"/></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226120.jpg" alt="5"/></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226239.jpg" alt="6"/></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226255.jpg" alt="7"/></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226478.jpg" alt="8"/></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226691.jpg" alt="9"/></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226887.jpg" alt="10"/></a>
</div>
</div>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="slide.js"></script>
</body>
</html>
<html>
<head>
<title>slideshow</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://www.php1.cn/"> </head>
<body>
<div class="container">
<div class="wapper">
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225608.jpg" alt="1" /></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225808.jpg" alt="2" /></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225977.jpg" alt="3"/></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225569.jpg" alt="4"/></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226120.jpg" alt="5"/></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226239.jpg" alt="6"/></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226255.jpg" alt="7"/></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226478.jpg" alt="8"/></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226691.jpg" alt="9"/></a>
<a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226887.jpg" alt="10"/></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
[css]
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;}
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;}
demo
demo