jQuery实现圆点图片轮播实例分享

来源：互联网 2024-10-13 01:57:52

在页面的指定位置实现的图片自动的左右轮流切换展示效果，当点击图片左下的标签(或中间的小圆点)切换到对应的图片。接下来通过本文给大家分享用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设置为第二张图片对应的编号即可.

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

代码实现如下 :

<ｓｃｒｉｐｔ src="jquery.min.js" type="text/javascript" charset="utf-8"></ｓｃｒｉｐｔ>  //引入jquery (css代码未贴)  <ｓｃｒｉｐｔ 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;});   //鼠标移出时,向左向右图标隐藏        })    })  </ｓｃｒｉｐｔ>  </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>

大家学会了吗？赶紧动手尝试一下吧。