css transform 3D幻灯片特效

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

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

demo

demo

代码改良

js代码冗余太多，精简后好多了。前面的代码完全不能看

var current = 0;
var length = $(".container a").length;
var $items = $(".container a");
$(function(){
	//not current left right item set hidden
	$(".container a:gt(1):lt(" + (length - 1) + ")").addClass("hiding");

	setItem();

	$(".container a").bind("click",function(){
		var $item = $(this);
		if ($item.hasClass("left")) {
			if (current < length - 1) {
				current ++;
			} else {
				current = 0;
			};
		} else if ($item.hasClass("right")) {
			if (current > 0) {
				current --;
			} else {
				current = length - 1;
			};
		};
		setItem();
	});

	$items.on("transitionend", function(event){
		$items.removeClass("trans");
	});
});

var setItem = function(){
	//current item
	var $current = $items.eq(current);
	//left item 
	var $leftItem = (current === (length - 1)) ?  $items.eq(0) : $items.eq(current + 1);
	//left item index
	var leftItemIndex = (current === (length - 1)) ?  0 : (current + 1);
	//right item
	var $rightItem = (current === 0) ? $items.eq(length - 1) : $items.eq(current - 1);
	//right item index
	var rightItemIndex = (current === 0) ? (length - 1) : (current - 1);
	//left 2 item,ready to show
	var $leftOutItem = (leftItemIndex === (length - 1)) ?  $items.eq(0) : $items.eq(leftItemIndex + 1);
	//right 2 item,ready to show
	var $rightOutItem = (rightItemIndex === 0) ? $items.eq(length - 1) : $items.eq(rightItemIndex - 1);
	
	//current move
	$current.attr("class","trans current showing");
	//left move	
	$leftItem.attr("class","trans left showing");
	//left 2 move
	$leftOutItem.attr("class","trans out-left");
	//right move
	$rightItem.attr("class","trans right showing");
	//right 2 move
	$rightOutItem.attr("class","out-right");
};