jquery realizes mouse suspension stop Carousel effect _jquery

This article describes the jquery implementation of mouse suspension stop carousel effect code. Share to everyone for your reference. Specifically as follows:
The screenshot of the running effect is as follows:

The specific code is as follows:

First, the main procedure

<! DOCTYPE html>  

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 say the mouse hover picture the principle of the carousel stop:

• 1, when the mouse hovers over the frame, the clear timer is used Clearinterval (timer) to close the timer, so that automatic wheel broadcast stop
• 2, when the mouse leaves the frame above, restart the timer
• 3, the mouse suspension and leaving with the help of the hover function
  

Hover (Over,out) a method that mimics a hover event (the mouse moves over an object and removes it). This is a custom method that provides a "stay in" state for frequently used tasks.
Parameters:
Over (function): The mouse moves over the element to be triggered.
Out (function): The mouse moves out of the element to be triggered.

Here's a look at the jquery program:

$ (document). Ready (function () {var slideshow=$ (". Slideshow"),//Get the name of the outermost frame Ul=slideshow.find ("ul"), Shownum  Ber=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, first displays the first image, that is, the index value is 0/* Manual Click button for the picture Carousel Code Start * * SHOWNUMBER.ON ("click", Function () {/) For each button  Bind a Click event $ (this). 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 in
    ow OK})});             /* Manually click the button to do the picture of the end of the Carousel code/* Timed automatic Carousel Picture Code Start * * 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 and starts again. inow=0;  } shownumber.eq (Inow). Trigger ("click");  Simulate the click},2000 of the trigger number button; 2000 for Carousel Time//timed automatic Carousel Picture Code End *///mouse hover picture Stop Carousel Code Start * * Slideshow.hover (function () {Clearinterval
      (timer);             },function () {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 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});
 /* Mouse hover Picture Stop Carousel Code End/})

From the above figure you can see that the open timer code is duplicated, so here you can define an AutoPlay function autoplay () to streamline the code, after the following streamlined code:

/* Timed automatic Carousel Picture Code Start * *
    function AutoPlay () {
      timer=setinterval (function () {    //open timer
      inow++;             Add 1 to the order of the indexed values in the picture, 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, The carousel effect jumps to the first picture to restart
        inow=0;
      Shownumber.eq (Inow). Trigger ("click");  Simulate the click},2000 of the Trigger Number button
      ;  2000 for the time of the Carousel
    }
    AutoPlay ();
 /* Timed automatic Carousel Picture code End * *

Do not forget to call this function when the definition is complete, that is, AutoPlay ();
Then the final version of the jquery program is as follows:

$ (document). Ready (function () {var slideshow=$ (". Slideshow"),//Get the name of the outermost frame Ul=slideshow.find ("ul"), Shownum  Ber=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, first displays the first image, that is, the index value is 0/* Manual Click button for the picture Carousel Code Start * * SHOWNUMBER.ON ("click", Function () {/) For each button  Bind a Click event $ (this). 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 in
    ow OK})}); /* Manual Click button for picture Carousel code End/* Timed automatic Carousel Picture Code Start * * Function AutoPlay () {Timer=setinterval (function () {//Open timed             Device inow++; Add 1 to the order of the indexed values of the picture so that you can implement the sequential carousel image if (inow>shownumber.length-1) {//When the last picture is reached, let Inow assign to the first pictureIndex value, the carousel effect jumps to the first picture to restart inow=0;  } shownumber.eq (Inow). Trigger ("click");  Simulate the click},2000 of the trigger number button;
    2000 for the time of the Carousel} AutoPlay ();
      /* Timed automatic Carousel Picture code end/* Mouse hover picture Stop Carousel Code Start * * Slideshow.hover (function () {clearinterval (timer);
    },autoplay); /* Mouse hover Picture Stop Carousel Code End/})

The above is the entire content of this article, you can combine the following two articles to learn:

Article One:jquery manual Click to achieve a picture carousel effect

Article Two:jquery implementation of timed automatic carousel effect

I hope this article will help you learn about the jquery program.