jQuery3d視覺輪播圖Demo

HTML代碼塊

<div class="box">
			<div class="list">
				<ul>
					<li class="p7">
						<a href="#"><img src="img/1.jpg" alt="" /></a>
					</li>
					<li class="p6">
						<a href="#"><img src="img/2.jpg" alt="" /></a>
					</li>
					<li class="p5">
						<a href="#"><img src="img/55.jpg" alt="" /></a>
					</li>
					<li class="p4">
						<a href="#"><img src="img/44.jpg" alt="" /></a>
					</li>
					<li class="p3">
						<a href="#"><img src="img/3.png" alt="" /></a>
					</li>
					<li class="p2">
						<a href="#"><img src="img/66.jpg" alt="" /></a>
					</li>
					<li class="p1">
						<a href="#"><img src="img/77.jpg" alt="" /></a>
					</li>
				</ul>
			</div>
			<a href="javascript:;" class="prev btn"></a>
			<a href="javascript:;" class="next btn"></a>

			<div class="buttons">
				<a href="javascript:;"><span class="blues"></span></a>
				<a href="javascript:;"><span></span></a>
				<a href="javascript:;"><span></span></a>
				<a href="javascript:;"><span></span></a>
				<a href="javascript:;"><span></span></a>
				<a href="javascript:;"><span></span></a>
				<a href="javascript:;"><span></span></a>
			</div>
		</div>

Css處理代碼

.box,
.box_c {
	margin-top: 50px;
	width: 100%;
	height: 340px;
	position: relative;
}

.box .list {
	width: 1200px;
	height: 300px;
	overflow: hidden;
	position: absolute;
	left: 50%;
	margin-left: -600px;
}

.btn {
	position: absolute;
	top: 50%;
	margin-top: -50px;
	width: 60px;
	height: 100px;
	line-height: 100px;
	font-size: 30px;
	color: white;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}

.next {
	background: url(img/i_rigth.png) no-repeat;
	right: 0;
}

.prev {
	background: url(img/i_left.png) no-repeat;
}

.box .list ul li,
.box_c .list_c ul li {
	position: absolute;
	top: 0;
	left: 0;
	list-style: none;
	/*opacity: 0;*/
	transition: all 0.3s ease-out;
}

.box .list ul li a img,
.box_c .list_c ul li a img {
	width: 751px;
	height: 300px;
	border: none;
	float: left;
}

.p1,
.c1 {
	transform: translate3d(-224px, 0, 0) scale(0.81);
}

.p2,
.c2 {
	transform: translate3d(0px, 0, 0) scale(0.81);
	transform-origin: 0 50%;
	opacity: 0.8;
	z-index: 2;
}

.p3,
.c3 {
	transform: translate3d(224px, 0, 0) scale(1);
	z-index: 3;
	opacity: 1;
}

.p4,
.c4 {
	transform: translate3d(449px, 0, 0) scale(0.81);
	transform-origin: 100% 50%;
	opacity: 0.8;
	z-index: 2;
}

.p5,
.c5 {
	transform: translate3d(672px, 0, 0) scale(0.81);
}

.p6,
.c6 {
	transform: translate3d(896px, 0, 0) scale(0.81);
}

.p7,
.c7 {
	transform: translate3d(1120px, 0, 0) scale(0.81);
}

.buttons {
	position: absolute;
	width: 1200px;
	height: 30px;
	bottom: 0;
	left: 50%;
	margin-left: -600px;
	text-align: center;
	padding-top: 10px;
}

.buttons a {
	display: inline-block;
	width: 35px;
	height: 5px;
	padding-top: 4px;
	cursor: pointer;
}

.buttons span {
	display: block;
	width: 35px;
	height: 1px;
	background: red;
}

.buttons .blues {
	background: blue;
}

jQuery代碼

/*輪播圖*/
	var $a = $(".buttons a");
	var $s = $(".buttons span");
	var cArr = ["p7", "p6", "p5", "p4", "p3", "p2", "p1"];
	var index = 0;
	$(".next").click(
		function() {
			nextimg();
		}
	)
	$(".prev").click(
		function() {
			previmg();
		}
	)
	//上一張
	function previmg() {
		cArr.unshift(cArr[6]);
		cArr.pop();
		//i是元素的索引，從0開始
		//e爲當前處理的元素
		//each循環，當前處理的元素移除所有的class，然後添加數組索引i的class
		$(".box .list ul li").each(function(i, e) {
			$(e).removeClass().addClass(cArr[i]);
		})
		index--;
		if(index < 0) {
			index = 6;
		}
		show();
	}

	//下一張
	function nextimg() {
		cArr.push(cArr[0]);
		cArr.shift();
		$(".box .list ul li").each(function(i, e) {
			$(e).removeClass().addClass(cArr[i]);
		})
		index++;
		if(index > 6) {
			index = 0;
		}
		show();
	}

	//通過底下按鈕點擊切換
	$a.each(function() {
		$(this).click(function() {
			var myindex = $(this).index();
			var b = myindex - index;
			if(b == 0) {
				return;
			} else if(b > 0) {
				/*
				 * splice(0,b)的意思是從索引0開始,取出數量爲b的數組
				 * 因爲每次點擊之後數組都被改變了,所以當前顯示的這個照片的索引纔是0
				 * 所以取出從索引0到b的數組,就是從原本的這個照片到需要點擊的照片的數組
				 * 這時候原本的數組也將這部分數組進行移除了
				 * 再把移除的數組添加的原本的數組的後面
				 */
				var newarr = cArr.splice(0, b);
				cArr = $.merge(cArr, newarr);
				$(".box .list ul li").each(function(i, e) {
					$(e).removeClass().addClass(cArr[i]);
				})
				index = myindex;
				show();
			} else if(b < 0) {
				/*
				 * 因爲b<0,所以取數組的時候是倒序來取的,也就是說我們可以先把數組的順序顛倒一下
				 * 而b現在是負值,所以取出索引0到-b即爲需要取出的數組
				 * 也就是從原本的照片到需要點擊的照片的數組
				 * 然後將原本的數組跟取出的數組進行拼接
				 * 再次倒序,使原本的倒序變爲正序
				 */
				cArr.reverse();
				var oldarr = cArr.splice(0, -b)
				cArr = $.merge(cArr, oldarr);
				cArr.reverse();
				$(".box .list ul li").each(function(i, e) {
					$(e).removeClass().addClass(cArr[i]);
				})
				index = myindex;
				show();
			}
		});
	});
	//改變底下按鈕的背景色
	function show() {
		$(".buttons span").eq(index).addClass("blues").parent().siblings().children().removeClass("blues");
	}
	//點擊class爲p2的元素觸發上一張照片的函數
	$(document).on("click", ".p2 a img", function() {
		previmg();
		return false; //返回一個false值，讓a標籤不跳轉
	});

	//點擊class爲p4的元素觸發下一張照片的函數
	$(document).on("click", ".p4 a img", function() {
		nextimg();
		return false;
	});

	//			鼠標移入box時清除定時器
	$(".box").mouseover(function() {
		clearInterval(timer);
	});

	//			鼠標移出box時開始定時器
	$(".box").mouseleave(function() {
		timer = setInterval(nextimg, 4000);
	});
	//			進入頁面自動開始定時器
	timer = setInterval(nextimg, 4000);

百度拼湊不成熟代碼僅供參考。
如有不妥請指出，謝謝！