csstransform3D幻灯片特效

[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]
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;}