js
复制代码 代码如下:
$(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
复制代码 代码如下:
slideshow
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;}