jquery realizes timed automatic carousel effect _jquery

The carousel map was written on the basis of the previous article jquery manual Click to achieve a picture carousel effect , that is to show the manual click on the carousel effect and the timing of the automatic carousel effect of the program, suggested that the small partner to learn a coherent study of my previous article to see, Read this article after reading ~ ~ ~ ~

Here's a look at my final timed automatic carousel effect and manually click the Carousel effect:

For the above show the animation speed is faster because my screenshot software is a green version, free ~ ~ ~ You know, is Kaka, the real effect is slower than this speed, but also uniform, can be commercial ~ ~ ~ So above the display of animation can only be used as a reference to the completion of the effect.
first, the main procedure

<! DOCTYPE html>  

Well, above the main program and the previous article no difference, did not make any changes ~~~~~ interested can view the first article, I will focus on this essay in the jquery program
second, CSS style

*{
 margin:0;
 padding:0;
}
ul{
 list-style:none
}
. slideshow{
 width:346px;
 height:210px;  /* is actually the height of the picture * *
 border:1px #eeeeee solid;
 margin:100px Auto;
 position:relative;
 Overflow:hidden; /* Here you need to hide the picture part of the overflow frame
/}. Slideshow ul{
 width:2000px;
 position:relative;  /* Here to note relative: objects can not cascade, but will be based on Left,right,top,bottom and other attributes in the normal document flow offset position, if there is no this property, the picture will not move around/
}
. Slideshow ul Li {
 float:left;  /* Let four pictures left floating, form side-by horizontal layout, easy to click the button when the left mobile * *
 width:346px;
Slideshow. shownav{  /* with absolute positioning to the number button layout * * *
 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;
}

Three, jquery program
First of all, the principle of timed automatic carousel:
1, first have to open a timer, assuming the timer set to 2000ms, that is, 2S timer to perform an operation
2, the timer every 2S operation is simulated in order to click on the number button, that is, triggering click events, so that the picture left
First look at the overall effect of the jquery code :

 var timer=null; Timer return value, mainly used to close timer
  var inow=0;  Inow is the index value of the picture being displayed, the first picture is displayed when the user opens the page, that is, the index value is 0
  timer=setinterval (function () {  //Open the timer
   inow++;       Order the index value of the picture to add 1, so that you can implement sequential carousel picture
   Shownumber.eq (Inow). Trigger ("click");//Simulate the Click event},2000 that triggers the number button
  ; 2000 for the time of the carousel

The above program can achieve every 2S picture of the carousel effect, but the last picture will stop when the wheel is broadcast, because did not determine whether Inow reached the last picture, so there is the following code two :

var timer=null; Timer return value, mainly used to close timer
  var inow=0;  Inow is the index value of the picture being displayed, the first picture is displayed when the user opens the page, that is, the index value is 0
  timer=setinterval (function () {  //Open the timer
   inow++;       Let the index order of the picture add 1, so that you can implement sequential carousel picture
   if (inow>shownumber.length-1) {//When the last picture is reached, let Inow assign to the index value of the first chart, and the carousel effect jumps to the first picture and starts again.
    inow=0;
   }
   Shownumber.eq (Inow). Trigger ("click"); Simulate the click},2000 of the Trigger number button
  ; 2000 for the time of the carousel

So the full code program for the jquery program is as follows:

 $ (document). Ready (function () {var slideshow=$ (". Slideshow"),//Get the name of outermost frame ul=slideshow . FIND ("ul"), Shownumber=slideshow.find (". Shownav span"),//Get button Onewidth=slideshow.find ("ul li"). EQ (0). width (); Gets the width of each picture Var timer=null;  Timer return value, mainly used to close timer var inow=0; Inow is the index value of the picture being displayed, when the user opens the page, the first picture is displayed, that is, the index value is 0 shownumber.on ("click", Function () {/) binds a click event $ (this) for each button. AddClass (" Active "). Siblings (). Removeclass (" active "); Click the button to add a highlight for the button and highlight the other buttons to remove the Var index=$ (this). index (); To get which button is clicked, that is to find the index value of the clicked button Ul.animate ({"Left":-onewidth*inow,//Note that the Left property is used here, so the UL style needs to be set position:relative; let the UL left
  
  To move n the width of the size of the picture, N is determined by the index of the indexed value of the clicked Button});       Timer=setinterval (function () {//open timer inow++; Let the index order of the picture add 1, so that you can implement sequential carousel picture if (inow>shownumber.length-1) {//When the last picture is reached, let Inow assign to the index value of the first chart, and the carousel effect jumps to the first picture to start again inow=
   0; } shownumber.eq (Inow). Trigger ("click"); Simulate the click},2000 of the trigger number button; 2000 for the time of the Carousel}) 

The above note is written in detail, mainly for the convenience of the small partners who want to learn to see, but in fact, I write the program will not comment so detailed, is very simple content, see here you may think that the jquery program is over, it is wrong, because the automatic carousel effect is correct, but the manual clicks will be wrong , I purposely made an animated GIF show the effect of the error:

When you see the effect, you suddenly dawu, picture automatic Carousel, you even click the button it also just echo you, jump to the button you click, but only for a while or according to the order of its carousel, regardless of the button you click should go after the rotation of the order, as for the reason why

is because the value of the index is not assigned to the timer's image index Inow, so that Inow can not store the button you clicked index value, that is, do not know which button you clicked, since you know the reason, then the following needs to be modified.

The final version of the jquery program after the modification is:

 $ (document). Ready (function () {var slideshow=$ (". Slideshow"),//Get the name of outermost frame ul=slideshow . FIND ("ul"), Shownumber=slideshow.find (". Shownav span"),//Get button Onewidth=slideshow.find ("ul li"). EQ (0). width (); Gets the width of each picture Var timer=null;  Timer return value, mainly used to close timer var inow=0; Inow is the index value of the picture being displayed, when the user opens the page, the first picture is displayed, that is, the index value is 0 shownumber.on ("click", Function () {/) binds a click event $ (this) for each button. AddClass (" Active "). Siblings (). Removeclass (" active "); Click the button to add a highlight for the button and highlight the other buttons to remove the Var index=$ (this). index ();
   Get which button is clicked, that is to find the index value of the clicked button Inow=index; Ul.animate ({"Left":-onewidth*inow,//note here to use the Left property, so the UL style inside need to set position:relative; let the UL left n picture size width,
  
  n according to the clicked button Index value inowx OK})};       Timer=setinterval (function () {//open timer inow++; Let the index order of the picture add 1, so that you can implement sequential carousel picture if (inow>shownumber.length-1) {//When the last picture is reached, let Inow assign to the index value of the first chart, and the carousel effect jumps to the first picture to start again inow=
   0; } shownumber.eq (Inow). Trigger ("click"); Simulate the click},2000 of the trigger number button; 2000 for the time of the Carousel}) 

The above is the entire content of this article, the next time for everyone to share the mouse hover over the carousel picture Stop the Carousel, the mouse after the picture followed by the rotation of the code, do not go away.