3D图片切换

在网页中图片轮换效果有很多，今天分享下这个3d效果的图片轮换； 先给出效果图： HTML代码：

<div class="box"> <div class="list"> <ul> <li class="p7"><a href="#"><img src="img/1.png" alt="" /></a></li> <li class="p6"><a href="#"><img src="img/2.png" alt="" /></a></li> <li class="p5"><a href="#"><img src="img/3.png" alt="" /></a></li> <li class="p4"><a href="#"><img src="img/44.jpg" alt="" /></a></li> <li class="p3"><a href="#"><img src="img/55.jpg" 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="blue"></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代码：

*{ margin: 0; padding: 0; } .box{ margin-top: 300px; width: 100%; height: 340px; position: relative; } .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; background: rgba(0,255,0,.5); cursor: pointer; } .next{ right: 0; } li{ position: absolute; top: 0; left: 0; list-style: none; opacity: 0; transition: all 0.3s ease-out; } img{ width: 751px; height: 300px; border:none; float: left; } .p1{ transform:translate3d(-224px,0,0) scale(0.81); } .p2{ transform:translate3d(0px,0,0) scale(0.81); transform-origin:0 50%; opacity: 0.8; z-index: 2; } .p3{ transform:translate3d(224px,0,0) scale(1); z-index: 3; opacity: 1; } .p4{ transform:translate3d(449px,0,0) scale(0.81); transform-origin:100% 50%; opacity: 0.8; z-index: 2; } .p5{ transform:translate3d(672px,0,0) scale(0.81); } .p6{ transform:translate3d(896px,0,0) scale(0.81); } .p7{ 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; } span{ display: block; width: 35px; height: 1px; background: red; } .blue{ background: blue; }

JS代码：

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 $("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(); $("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); $("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(); $("li").each(function(i,e){ $(e).removeClass().addClass(cArr[i]); }) index=myindex; show(); } }) }) //改变底下按钮的背景色 function show(){ $($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue"); } //点击class为p2的元素触发上一张照片的函数 $(document).on("click",".p2",function(){ previmg(); return false;//返回一个false值，让a标签不跳转 }); //点击class为p4的元素触发下一张照片的函数 $(document).on("click",".p4",function(){ nextimg(); return false; }); // 鼠标移入box时清除定时器 $(".box").mouseover(function(){ clearInterval(timer); }) // 鼠标移出box时开始定时器 $(".box").mouseleave(function(){ timer=setInterval(nextimg,4000); }) // 进入页面自动开始定时器 timer=setInterval(nextimg,4000);