js層級輪播圖相容IE8及以上瀏覽器
阿新 • • 發佈：2018-12-09
預覽
本輪播圖相容ie8+瀏覽器,精華部分js+css,什麼定時輪播,什麼旋轉,全部實現!
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>
js程式碼
<script type="text/javascript"> 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); </script>
最重要的css程式碼來了,有兩部分吆! 重點在p1-p7部分
1):css3編寫的 *{margin:0;padding:0} .box{margin-top:80px;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 .3s ease-out} img{width:751px;height:300px;border:0;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:.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:.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} 2):css2編寫的,可以支援ie8及以上瀏覽器 img{width:100%;height:100%} .box{width:100%;height:416px;position:relative} .box .list{width:1200px;height:300px;overflow:hidden;position:absolute;top:60px;left:50%;margin-left:-600px} .box .btn{position:absolute;width:22px;height:23px;line-height:24px;font-size:30px;color:white;text-decoration:none;text-align:center;background:rgba(0,255,0,.5);cursor:pointer} .box .prev{background:url("img/b_l.png") no-repeat;bottom:8px;left:40%;z-index:10} .box .next{background:url("img/b_r.png") no-repeat;bottom:8px;right:40%;z-index:10} .box .list li{position:absolute;list-style:none;opacity:0;transition:all .3s ease-out} .box .list li img{border:0;float:left} .box .list li.p1{z-index:0;left:34px;top:41px;opacity:1;width:379px;height:218px} .box .list li.p2{z-index:1;opacity:1;left:124px;top:28.8889px;width:421px;height:242px} .box .list li.p3{z-index:2;width:467.901px;height:269.136px;opacity:1;left:230px;top:15.4321px} .box .list li.p4{top:0;left:340px;width:520px;height:300px;z-index:3;opacity:1} .box .list li.p5{z-index:2;width:468px;height:270px;right:230px;top:15px;opacity:1} .box .list li.p6{z-index:1;opacity:1;right:124px;top:28.5px;width:421px;height:242px} .box .list li.p7{z-index:0;opacity:1;right:34px;top:40.65px;width:379px;height:218px} .box .list li span{position:absolute;bottom:0;left:0;display:block;height:50px;background-color:rgba(32,58,130,0.6);line-height:50px;font-size:16px;color:#fff;width:100%;text-align:center} .box .list li a{width:100%;height:100%;display:block;z-index:10} .box .list li i{background:url("img//sjx.png") no-repeat;position:absolute;bottom:46%;left:48%;width:60px;height:60px} .box .buttons{position:absolute;width:1200px;height:30px;bottom:0;left:50%;margin-left:-600px;text-align:center;padding-top:10px} .box .buttons a{display:inline-block;text-align:center;cursor:pointer} .box .buttons span{display:block;width:10px;height:10px;background:url("img/por.png") no-repeat;margin:0 auto} .box .buttons span.blue{width:22px;background:url("img/por_w.png") no-repeat}