首頁 >web前端 >js教程 >jQuery實作圓點圖片輪播實例分享

jQuery實作圓點圖片輪播實例分享

小云云原創: 2018-01-22 11:23:521949瀏覽

在頁面的指定位置實現的圖片自動的左右輪流切換展示效果，當點擊圖片左下的標籤(或中間的小圓點)切換到對應的圖片。接下來透過本文跟大家分享用jQuery實作圓點圖片輪播效果實例程式碼，需要的朋友參考下，希望能幫助大家。

圖片輪播效果:

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

點擊圖片左下的標籤(或中間的小圓點)切換到對應的圖片;

jQuery實作圓點圖片輪播實例分享

點擊圖片的左右切換標籤;

jQuery實作圓點圖片輪播實例分享

整體思路:

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

自動輪播: 將一個用來放置圖片素材的與顯示框同高度的大p放入顯示框,將圖片素材放入大的p中,透過jquery的animate()方法改變大p相對於顯示框絕對位置的left值及變化時間實現圖片的滑動;使用setInterval()方法設定定時器,達到自動播放效果;無縫連續播放的重點在於,第一張圖片與最後一張圖片要相同,這樣播放完最後一張圖片後將大p框的left設定為初始值,再將與圖片索引相同的變數設定為1(第二張),這樣就能達到無縫連續滑動效果;

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

點擊標籤切換到對應圖片: 對點擊切換圖片的li標籤新增滑鼠點擊事件,若存在定時器的先清除,使用$(this).Index()取得目前點擊圖片的序號(索引) ,將大p的left值設定為目前圖片位置的值,同時別忘了將當前li標籤設定深顏色的明顯效果,其他li標籤設定初始效果;在事件中設定倒數計時,當滑鼠點擊後一段時間不進行其他動作,則恢復自動播放的計時器;

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

點擊向左向右標籤切換到上/下一張圖片: 此標籤使用標籤達到效果更好(防止連續點擊時產生選取頁面變藍的現象),先取得點擊時圖片的編號,此時不能使用$(this).Index(),因為此時this指代的對象為左右切換標籤,而不是圖片對象,還記得上面那個與圖片索引相同的變量嗎?我們需要一開始就設定它為全域變數(我將它起名為rcd),它的值相當於是和圖片,li標籤一起綁定的,在還沒有點擊向左向右標籤時,圖片是在輪播的,rcd變數中存當前圖片的序號,因此,儘管用不了this,我們可以用rcd+1/-1找到向右滑/向左劃的圖片編號,有了編號,就可以知道大p需要運動到的位置,和設定左下方的標籤顯示狀態了.當rcd-1==-1時,將p的位置設定為最後一張圖片顯示的位置,然後將rcd設定為倒數第二張圖片對應的編號;當rcd+1比最後一張還多一時,將p的位置設定為第一張圖片顯示的位置,將rcd設定為第二張圖片對應的編號即可.

#-- -------------------------------------------------- ----------------------------

程式碼實作如下：

<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>  //引入jquery (css代码未贴)
  <script type="text/javascript">
    $(function(){
        var rcd=0;       //代表图片和li标签编号的全局变量
//       滑动函数
        function slide(){   
          rcd++;
          if(rcd==4){    //右滑倒最后一张时,将图片设定为第一张的位置,即将滑动的图片设定为第二张(rcd=1)
            $(&#39;#sld&#39;).css({&#39;left&#39;:&#39;0&#39;});
            rcd=1;
          };
          var dis = rcd*(-1210)+&#39;px&#39;;    //这里的1210是每张图片的宽度,rcd和dis的关系就是编号和p left值的关系
          $(&#39;#sld&#39;).stop().animate({&#39;left&#39;:dis},1000)  //设定left
          if (rcd==3) {    //当切换到最后一张时(一共4张图片),将左下方的标签样式也改成与第一张一样的
            $(&#39;#fix ul li&#39;).eq(0).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})
          }else{
            $(&#39;#fix ul li&#39;).eq(rcd).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})      //不是最后一张那么就正常执行
          }
        }
//       设定定时器,开始轮播
        var timer = setInterval(slide,2000);
        var st;    //声明倒计时函数变量名
//       绑定li鼠标点击事件
        $(&#39;#fix ul li&#39;).click(function(){
          clearInterval(timer);     //清除定时器(同下一行)
          clearTimeout(st);
          var rcd = $(this).index();   //获得点击的li的编号
          var dis =rcd*(-1210)+&#39;px&#39;;   //获得该编号对应的p的left值
          $(&#39;#sld&#39;).stop().animate({&#39;left&#39;:dis},500)  //开始运动
          $(&#39;#fix ul li&#39;).eq(rcd).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})     //设置当前li样式,其他li变为初始值
          st = setTimeout(function(){   //设置定时器,若3秒内没有鼠标点击操作,就重新设置轮播定时器
            timer = setInterval(slide,2000);
          },3000)
        }); 
//       左图标点击事件
        $(&#39;#fix .lt&#39;).click(function(){
          clearInterval(timer);
          clearTimeout(st);
          rcd--;     //点击前的编号-1
          if(rcd==-1){  //如果rcd减后值为-1,那么将p的left设置为最后一张图显示的值,并将rcd设置为倒数第二张的编号
            $(&#39;#sld&#39;).css({&#39;left&#39;:&#39;-3630px&#39;});
            rcd=2;
          };
          var dis = rcd*(-1210)+&#39;px&#39;;
          $(&#39;#sld&#39;).stop().animate({&#39;left&#39;:dis},1000)  //运动
          if (rcd==3) {     //与前面相同
            $(&#39;#fix ul li&#39;).eq(0).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})
          }else{
            $(&#39;#fix ul li&#39;).eq(rcd).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})
          }
          st = setTimeout(function(){
            timer = setInterval(slide,2000);
          },3000)
        })
//       右图标点击事件
        $(&#39;#fix .rt&#39;).click(function(){
          clearInterval(timer);
          clearTimeout(st);
          slide();     //右图标点击一次与滑动函数一致
          st = setTimeout(function(){
            timer = setInterval(slide,2000);
          },3000)
        })
//       给#fix p加鼠标移入事件
        $(&#39;#fix&#39;).mouseenter(function(){     
          $(&#39;#fix a&#39;).css({&#39;display&#39;:&#39;block&#39;});  //鼠标移入时,向左向右图标显示
        })
//       给#fix p加鼠标移出事件
        $(&#39;#fix&#39;).mouseleave(function(){
          $(&#39;#fix a&#39;).css({&#39;display&#39;:&#39;none&#39;});   //鼠标移出时,向左向右图标隐藏
        })
    })
  </script>
  </head>
  <body>
    <p id="fix">
      <p id="sld">
        <img  src="轮播图/ph1.png"/ alt="jQuery實作圓點圖片輪播實例分享" >
        <img  src="轮播图/ph2.jpg"/ alt="jQuery實作圓點圖片輪播實例分享" >
        <img  src="轮播图/ph3.jpg"/ alt="jQuery實作圓點圖片輪播實例分享" >
        <img  src="轮播图/ph1.png"/ alt="jQuery實作圓點圖片輪播實例分享" >
      </p>
      <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"/ alt="jQuery實作圓點圖片輪播實例分享" ></a> //阻止浏览器的默认跳转
      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="rt"><img  src="轮播图/right.png"/ alt="jQuery實作圓點圖片輪播實例分享" ></a>
    </p>
  </body>

大家學會了嗎？趕快動手嘗試。

jQuery實作圓點圖片輪播實例分享

相關文章