Example sharing of jQuery implementation of dot image carousel-JS Tutorial-php.cn

Example sharing of jQuery implementation of dot image carousel

小云云

Release： 2018-01-22 11:23:52

Original

1865 people have browsed it

The pictures implemented at the specified position on the page automatically switch left and right to display the effect. When you click the label on the lower left of the picture (or the small dot in the middle) to switch to the corresponding picture. Next, through this article, I will share with you the example code of using jQuery to achieve the dot image carousel effect. Friends who need it can refer to it. I hope it can help everyone.

Picture carousel effect:

The pictures are automatically switched left and right at the specified position on the page, and the effect is seamless connection;

Click the label on the lower left side of the picture (or the small dot in the middle) to switch to the corresponding picture;

Example sharing of jQuery implementation of dot image carousel

Click on the left and right sides of the picture Switch tags;

Example sharing of jQuery implementation of dot image carousel

Overall idea:

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

Automatic carousel: Put a large p with the same height as the display frame for placing picture materials into the display frame, and put the picture materials into the large p In p, use jquery's animate() method to change the left value and change time of the large p relative to the absolute position of the display box to achieve sliding of the picture; use the setInterval() method to set the timer to achieve the automatic playback effect; seamless continuous playback The key point is that the first picture and the last picture should be the same, so that after the last picture is played, the left of the large p box is set to the initial value, and then the variable with the same index as the picture is set to 1 (the second Zhang), in this way, a seamless continuous sliding effect can be achieved;

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

Click the label to switch to the corresponding picture: Add a mouse click event to the li label that clicks to switch the picture. If there is a timer, clear it first and use $(this).Index() to get the serial number (index) of the currently clicked picture. , set the left value of the big p to the value of the current picture position, and don't forget to set the current li tag to a dark color for an obvious effect, and set the initial effect for other li tags; set a countdown in the event, and when the mouse clicks, it will not disappear for a period of time. Perform other operations to restore the automatic playback timer;

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

Click the left or right label to switch to the previous/next picture: This label uses the label to achieve better results (to prevent the selected page from turning blue when clicked continuously), first obtain the click time The number of the picture, $(this).Index() cannot be used at this time, because the object this refers to is the left and right switching label, not the picture object. Do you remember the variable above that is the same as the picture index? We need a Set it as a global variable from the beginning (I named it rcd). Its value is equivalent to being bound together with the picture and the li tag. Before the left or right label is clicked, the picture is rotating. , the rcd variable stores the serial number of the current picture. Therefore, although this cannot be used, we can use rcd+1/-1 to find the number of the picture that slides to the right/swipes to the left. With the number, we can know that the big p needs to move. to the position, and set the display status of the label in the lower left. When rcd-1==-1, set the position of p to the position where the last picture is displayed, and then set rcd to the position corresponding to the penultimate picture. Number; when rcd+1 is one more than the last picture, set the position of p to the position where the first picture is displayed, and set rcd to the number corresponding to the second picture.

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

The code is implemented as follows:

<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="Example sharing of jQuery implementation of dot image carousel" >
        <img  src="轮播图/ph2.jpg"/ alt="Example sharing of jQuery implementation of dot image carousel" >
        <img  src="轮播图/ph3.jpg"/ alt="Example sharing of jQuery implementation of dot image carousel" >
        <img  src="轮播图/ph1.png"/ alt="Example sharing of jQuery implementation of dot image carousel" >
      </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="Example sharing of jQuery implementation of dot image carousel" ></a> //阻止浏览器的默认跳转
      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="rt"><img  src="轮播图/right.png"/ alt="Example sharing of jQuery implementation of dot image carousel" ></a>
    </p>
  </body>

Copy after login

Have you learned it yet? Hurry up and try it out.

Related recommendations:

Bootstrap image carousel effect implementation method

Example of using JS to implement image carousel

Use JQuery to achieve image carousel effect

The above is the detailed content of Example sharing of jQuery implementation of dot image carousel. For more information, please follow other related articles on the PHP Chinese website!