用jQuery實(shí)現(xiàn)圓點(diǎn)圖片輪播效果

更新時間：2017年03月19日 11:50:36 作者：ta_men

在頁面的指定位置實(shí)現(xiàn)的圖片自動的左右輪流切換展示效果，當(dāng)點(diǎn)擊圖片左下的標(biāo)簽(或中間的小圓點(diǎn))切換到對應(yīng)的圖片。接下來通過本文給大家分享用jQuery實(shí)現(xiàn)圓點(diǎn)圖片輪播效果實(shí)例代碼，需要的朋友參考下

圖片輪播效果 :

在頁面的指定位置實(shí)現(xiàn)的圖片自動的左右輪流切換展示,效果為無縫連接;

點(diǎn)擊圖片左下的標(biāo)簽(或中間的小圓點(diǎn))切換到對應(yīng)的圖片;

圓點(diǎn)圖片

點(diǎn)擊標(biāo)簽

點(diǎn)擊圖片的左右切換標(biāo)簽;

左右圖標(biāo)

整體思路 :

--------------------------------------------------------------------------------

自動輪播: 將一個用于放置圖片素材的與顯示框同高度的大div放入顯示框,將圖片素材放入大的div中,通過jquery的animate()方法改變大div相對于顯示框絕對位置的left值及變化時間實(shí)現(xiàn)圖片的滑動;使用setInterval()方法設(shè)置定時器,達(dá)到自動播放效果;無縫連續(xù)播放的重點(diǎn)在于,第一張圖片與最后一張圖片要相同,這樣播放完最后一張圖片后將大div框的left設(shè)定為初始值,再將與圖片索引相同的變量設(shè)定為1(第二張),這樣就能達(dá)到無縫連續(xù)滑動效果;

--------------------------------------------------------------------------------

點(diǎn)擊標(biāo)簽切換到對應(yīng)圖片: 對點(diǎn)擊切換圖片的li標(biāo)簽添加鼠標(biāo)點(diǎn)擊事件,若存在定時器的先清除,使用$(this).Index()獲取當(dāng)前點(diǎn)擊圖片的序號(索引),將大div的left值設(shè)置為當(dāng)前圖片位置的值,同時別忘了將當(dāng)前l(fā)i標(biāo)簽設(shè)置深顏色的明顯效果,其他li標(biāo)簽設(shè)置初始效果;在事件中設(shè)置倒計(jì)時,當(dāng)鼠標(biāo)點(diǎn)擊后一段時間不進(jìn)行其他操作,則恢復(fù)自動播放的定時器;

--------------------------------------------------------------------------------

點(diǎn)擊向左向右標(biāo)簽切換到上/下一張圖片: 該標(biāo)簽使用< a >標(biāo)簽達(dá)到效果更好(防止連續(xù)點(diǎn)擊時產(chǎn)生選中頁面變藍(lán)的現(xiàn)象),先獲取點(diǎn)擊時圖片的編號,此時不能使用$(this).Index(),因?yàn)榇藭rthis指代的對象為左右切換標(biāo)簽,而不是圖片對象,還記得上面那個與圖片索引相同的變量嗎?我們需要一開始就設(shè)定它為全局變量(我將它起名為rcd),它的值相當(dāng)于是和圖片,li標(biāo)簽一起綁定的,在還沒有點(diǎn)擊向左向右標(biāo)簽時,圖片是在輪播的,rcd變量中存著當(dāng)前圖片的序號,因此,盡管用不了this,我們可以用rcd+1/-1找到向右滑/向左劃的圖片編號,有了編號,就可以知道大div需要運(yùn)動到的位置,和設(shè)置左下方的標(biāo)簽顯示狀態(tài)了.當(dāng)rcd-1==-1時,將div的位置設(shè)置為最后一張圖片顯示的位置,然后將rcd設(shè)置為倒數(shù)第二張圖片對應(yīng)的編號;當(dāng)rcd+1比最后一張還多一時,將div的位置設(shè)置為第一張圖片顯示的位置,將rcd設(shè)置為第二張圖片對應(yīng)的編號即可.

--------------------------------------------------------------------------------

代碼實(shí)現(xiàn)如下 :

<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>  //引入jquery (css代碼未貼)
  <script type="text/javascript">
    $(function(){
        var rcd=0;       //代表圖片和li標(biāo)簽編號的全局變量
//       滑動函數(shù)
        function slide(){   
          rcd++;
          if(rcd==4){    //右滑倒最后一張時,將圖片設(shè)定為第一張的位置,即將滑動的圖片設(shè)定為第二張(rcd=1)
            $('#sld').css({'left':'0'});
            rcd=1;
          };
          var dis = rcd*(-1210)+'px';    //這里的1210是每張圖片的寬度,rcd和dis的關(guān)系就是編號和div left值的關(guān)系
          $('#sld').stop().animate({'left':dis},1000)  //設(shè)定left
          if (rcd==3) {    //當(dāng)切換到最后一張時(一共4張圖片),將左下方的標(biāo)簽樣式也改成與第一張一樣的
            $('#fix ul li').eq(0).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
          }else{
            $('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})      //不是最后一張那么就正常執(zhí)行
          }
        }
//       設(shè)定定時器,開始輪播
        var timer = setInterval(slide,2000);
        var st;    //聲明倒計(jì)時函數(shù)變量名
//       綁定li鼠標(biāo)點(diǎn)擊事件
        $('#fix ul li').click(function(){
          clearInterval(timer);     //清除定時器(同下一行)
          clearTimeout(st);
          var rcd = $(this).index();   //獲得點(diǎn)擊的li的編號
          var dis =rcd*(-1210)+'px';   //獲得該編號對應(yīng)的div的left值
          $('#sld').stop().animate({'left':dis},500)  //開始運(yùn)動
          $('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})     //設(shè)置當(dāng)前l(fā)i樣式,其他li變?yōu)槌跏贾?
          st = setTimeout(function(){   //設(shè)置定時器,若3秒內(nèi)沒有鼠標(biāo)點(diǎn)擊操作,就重新設(shè)置輪播定時器
            timer = setInterval(slide,2000);
          },3000)
        }); 
//       左圖標(biāo)點(diǎn)擊事件
        $('#fix .lt').click(function(){
          clearInterval(timer);
          clearTimeout(st);
          rcd--;     //點(diǎn)擊前的編號-1
          if(rcd==-1){  //如果rcd減后值為-1,那么將div的left設(shè)置為最后一張圖顯示的值,并將rcd設(shè)置為倒數(shù)第二張的編號
            $('#sld').css({'left':'-3630px'});
            rcd=2;
          };
          var dis = rcd*(-1210)+'px';
          $('#sld').stop().animate({'left':dis},1000)  //運(yùn)動
          if (rcd==3) {     //與前面相同
            $('#fix ul li').eq(0).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
          }else{
            $('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
          }
          st = setTimeout(function(){
            timer = setInterval(slide,2000);
          },3000)
        })
//       右圖標(biāo)點(diǎn)擊事件
        $('#fix .rt').click(function(){
          clearInterval(timer);
          clearTimeout(st);
          slide();     //右圖標(biāo)點(diǎn)擊一次與滑動函數(shù)一致
          st = setTimeout(function(){
            timer = setInterval(slide,2000);
          },3000)
        })
//       給#fix div加鼠標(biāo)移入事件
        $('#fix').mouseenter(function(){     
          $('#fix a').css({'display':'block'});  //鼠標(biāo)移入時,向左向右圖標(biāo)顯示
        })
//       給#fix div加鼠標(biāo)移出事件
        $('#fix').mouseleave(function(){
          $('#fix a').css({'display':'none'});   //鼠標(biāo)移出時,向左向右圖標(biāo)隱藏
        })
    })
  </script>
  </head>
  <body>
    <div id="fix">
      <div id="sld">
        <img src="輪播圖/ph1.png"/>
        <img src="輪播圖/ph2.jpg"/>
        <img src="輪播圖/ph3.jpg"/>
        <img src="輪播圖/ph1.png"/>
      </div>
      <ul>
        <li style="opacity: 0.6;">iPhone6</li>
        <li>Mate9</li>
        <li>vivo X9</li>
      </ul>
      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="lt"><img src="輪播圖/left.png"/></a> //阻止瀏覽器的默認(rèn)跳轉(zhuǎn)
      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="rt"><img src="輪播圖/right.png"/></a>
    </div>
  </body>

也可以在我的Github上克隆這個效果的完整代碼: https://github.com/Getthrough/Image-Carousel

以上所述是小編給大家介紹的用jQuery實(shí)現(xiàn)圓點(diǎn)圖片輪播效果，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章: