今天來聊聊jQuery輪播的封裝！

　　我自己封裝了一個圖片寬1200px，高400px的無縫滾動輪播圖；話不多說看看代碼吧！

Js:

/*** Created by Administrator on 2017/7/1 0001.*/ $(function(){var timer1=null;var timer2=null;var q=1;var x=-1200; //剛開始讓第一張圖片展現出來 // 向左移動 leftstar()function leftstar(){//設定計時器timer1=setInterval(function(){//每走完一張，對應小白點對應顯示if(x%1200==0){stop(1);//關閉向右走的計時器xiaobia(Math.abs(x/1200)-1)}//當一輪圖片走完，又返回原來的為位置接著走，依次循環if(x==-6000){x=-1200;}$("#imgs").css("left",x+"px");x-=5},30)} // 向右移動 function rightstar(){timer1=setInterval(function(){if(x%1200==0){stop(2);//關閉向左走的計時器xiaobia(Math.abs(x/1200)-1)}if(x==0){x=-4800;}$("#imgs").css("left",x+"px");x+=5},30)} // 停止計時器 function stop(q){clearInterval(timer1);clearTimeout(timer2);if(q==1){timer2=setTimeout(leftstar,500)}if(q==2){timer2=setTimeout(rightstar,500)}}// 移入移出$("#banner").hover(function(){stop()},function(){stop(q)});//向左走的按鈕$("#left_Btn").click(function(){stop(1)q=1;});//向右走的按鈕$("#right_Btn").click(function(){stop(2)q=2;})// 小白點 function xiaobia(num){if(num==4){num=0}if(num==-1){num=3}$("#biao li").eq(num).css("background","red")$("#biao li").eq(num).siblings().css("background","white")}$("#biao li").hover(function(){xiaobia($(this).index())$("#imgs").css("left",-($(this).index()*1200)-1200)x=-($(this).index()*1200)-1200}) })

css:

/*4+2 width:1200px;*/ *{margin: 0;padding: 0; }/*最外層的div*/ #banner{width: 1200px;height: 400px;position: relative;top: 100px;left: 10%;overflow: hidden; } /*包裹圖片的ul*/ #imgs{width: 7200px;height: 400px;position: absolute;left: -1200px; } #imgs li{float: left;list-style: none; } #imgs li img{width: 1200px;height: 400px; } /*小圓點的父級*/ #biao{width: 200px;height: 50px;position: absolute;left: 35%;bottom: 0; } /*小圓點*/ #biao li{float: left;list-style: none;margin-left: 20px;border-radius: 50%;width: 30px;height: 30px;color: #007ed9;line-height: 30px;background: white;text-align: center; } /*左右按鈕的父級*/ ol{width: 1200px;height: 50px;text-align: center;line-height: 50px;position: absolute;left: 0;top:35%; } ol li{font-size: 30px;list-style: none;width: 50px;height: 50px;color: white;position: absolute;background: rgba(0,0,0,.5); } /*左按鈕*/ #left_Btn{left: 0; } /*右按鈕 */ #right_Btn{right: 0; }

html:

<div id="banner">
<ul id="imgs">
<li><img src="img/b4.jpg" alt=""/></li>
<li><img src="img/b1.jpg" alt=""/></li>
<li><img src="img/b2.jpg" alt=""/></li>
<li><img src="img/b3.jpg" alt=""/></li>
<li><img src="img/b4.jpg" alt=""/></li>
<li><img src="img/b1.jpg" alt=""/></li>
</ul>
<ul id="biao">
<li></li>
<li></li>
<li></li>
<li></li>
<li style="display: none;"></li>
</ul>
<ol>
<li id="left_Btn"> < </li>
<li id="right_Btn"> > </li>
</ol>
</div>

? ? ? 這個封裝只能適用于圖片寬為1200px，高為400px的一個輪播圖。

　　

轉載于:https://www.cnblogs.com/yhyanjin/p/7106512.html

總結

以上是生活随笔為你收集整理的jQuery轮 播的封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。