jquery implements scheduled automatic carousel effects

This carousel image is written based on the previous article jQuery manual click to achieve image carousel effects , that is, what is shown this time is manual Program for click carousel effect and scheduled automatic carousel effect. I suggest friends who want to learn continuously to read my previous articles and then read this article~~~~

Let’s take a look at the final scheduled automatic carousel effect and manual click carousel effect I made:

The reason why the above display animation is faster is because my screenshot software is the green version, which is free~~~ You know, it is stuck. The real effect is slower than this speed, and it is still uniform, and can be used commercially. ~~~So the above display animation can only be used as a reference for the completed effect.
1. Main program

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>轮播图①（手动点击轮播）</title>
  <link type="text/css" rel="stylesheet" href="css/layout.css" />
 </head>
 <body>
  <div class="slideShow">
   <!--图片布局开始-->
   <ul>
    <li><a href="#"><img src="img/picture01.jpg" /></a></li>
    <li><a href="#"><img src="img/picture02.jpg" /></a></li>
    <li><a href="#"><img src="img/picture03.jpg" /></a></li>
    <li><a href="#"><img src="img/picture04.jpg" /></a></li>
   </ul>
   <!--图片布局结束-->
   
   <!--按钮布局开始-->
   <div class="showNav">
    <span class="active">1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
   </div>
   <!--按钮布局结束-->
  </div>
  <script src="js/jquery-1.11.3.js"></script>
  <script src="js/layout.js"></script>
 </body>
</html>

Copy after login

Well, the main program above is no different from the previous article, and no modifications have been made~~~~~ If you are interested, you can check out the first article. The focus of my essay this time will be on the Jquery program
2. CSS style

*{
 margin: 0;
 padding: 0;
}
ul{
 list-style: none;
}
.slideShow{
 width: 346px;
 height: 210px;  /*其实就是图片的高度*/
 border: 1px #eeeeee solid;
 margin: 100px auto;
 position: relative;
 overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
 width: 2000px;
 position: relative;  /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
 float: left;  /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
 width: 346px;
}
.slideShow .showNav{  /*用绝对定位给数字按钮进行布局*/
 position: absolute;
 right: 10px;
 bottom: 5px;
 text-align:center;
 font-size: 12px; 
 line-height: 20px;
}
.slideShow .showNav span{
 cursor: pointer;
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 background: #ff5a28;
 margin-left: 2px;
 color: #fff;
}
.slideShow .showNav .active{
 background: #b63e1a;
}

Copy after login

3. jQuery program
First, let’s talk about the principle of scheduled automatic rotation:
1. First, you must start a timer. Assume that the timer time is set to 2000ms, that is, the 2S timer performs an operation
2. The operation performed by the timer every 2S is to simulate clicking the number buttons in sequence, that is, triggering the click event to move the picture to the left
Let’s first look at the jQuerycode 1 to achieve the general effect:

 var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click事件
  },2000); //2000为轮播的时间

Copy after login

The above program can achieve the carousel effect of pictures every 2S, but the carousel will stop when it reaches the last picture, because it does not determine whether iNow has reached the last picture, so the following

code is Two :

var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间

Copy after login

So the complete code program of the jQuery program is as follows:

$(document).ready(function(){
 var slideShow=$(".slideShow"),  //获取最外层框架的名称
  ul=slideShow.find("ul"),  
  showNumber=slideShow.find(".showNav span"),//获取按钮
  oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
  var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  
  showNumber.on("click",function(){   //为每个按钮绑定一个点击事件  
   $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
   var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
   ul.animate({
    "left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值index确定
   })
  });
  
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间
})

Copy after login

The above comments are very detailed, mainly for the convenience of friends who want to learn. However, in fact, when I write a program, I don’t comment in such detail. They are all very simple content. You may think that when you see this, The jQuery program is over, which is a big mistake, because the automatic carousel effect is correct, but an error occurs when you click manually. I specially made a Gif animation to show the error effect:

When you see the above effect, you will suddenly realize that when the pictures are automatically rotated, even if you click the button, it will only echo you and jump to the button you clicked, but it will still rotate after only pressing it for a while. The order, regardless of the carousel order you should go after clicking the button,

As for the reason

It’s because the index value when manually clicking is not assigned to the timer’s image index iNow, so iNow cannot store the index value of the button you clicked, that is, it does not know which button you clicked. Now that you know the reason, then the following It needs to be modified.

The final version of the jQuery program after modification is:

$(document).ready(function(){
 var slideShow=$(".slideShow"),  //获取最外层框架的名称
  ul=slideShow.find("ul"),  
  showNumber=slideShow.find(".showNav span"),//获取按钮
  oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
  var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  
  showNumber.on("click",function(){   //为每个按钮绑定一个点击事件  
   $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
   var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
   iNow=index;
   ul.animate({
    "left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定
   })
  });
  
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间
})

Copy after login

The above is the entire content of this article. Next time, I will share with you the code that stops the image from rotating when the mouse is hovering over the carousel image, and continues to rotate after the mouse is removed. Don’t walk away.

jquery implements scheduled automatic carousel effects_jquery