Jquery special effect (5)-slideshow ③ (stop slideshow with the mouse floating), jquery

Jquery special effect (5)-slideshow ③ (stop slideshow with the mouse floating), jquery

Today, I am bored. Now I want to write a carousel image. It should be noted that this carousel image was in the previous article.Jquery special effects (3)-Carousel images ① (manually click carousel) and jquery special effects (4)-Carousel images ② (timed automatic carousel)This article shows the manual click carousel effect, timed automatic carousel effect, and the program where the mouse is suspended on the image, it is recommended that you read the notes I wrote yesterday before reading this article ~~~~

Let's first look at the final Dynamics:

The above main display effect is that when the mouse is suspended, the image is stopped and the software is green, so the display speed is a little faster, but the general effect has already appeared ~~~~

 

 

I. Main Program

<! DOCTYPE html> 
Amount, the above main program is no different from the previous two notes, and no changes have been made ~~~~~ For more information, seeJquery special effects (3)-Carousel images ① (manually click carousel)Note: The focus of my essay will be in the Jquery program.
 
 
Ii. CSS style
* {Margin: 0; padding: 0;} ul {list-style: none ;}. slideShow {width: pixel PX; height: 210px;/* is actually the image height */border: 1px # eeeeee solid; margin: 100px auto; position: relative; overflow: hidden; /* Hide the image part of the overflow frame */}. slideShow ul {width: 2000px; position: relative;/* Note relative: the object cannot be stacked, but it will be based on left, right, top, bottom and other attributes are offset in the normal Document Stream. Without this attribute, the image cannot be moved left or right */}. slideShow ul li {float: left;/* float the left of the four images to form a side-by-side horizontal layout to move left when you click the button */width: Adjust PX ;}. slideShow. showNav {/* layout with the absolute positioning button to the number */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 ;}
Hey, the style program above is no different from the previous two notes and has not been modified ~~~~~ For more information, seeJquery special effects (3)-Carousel images ① (manually click carousel)Note: The focus of my essay will be in the Jquery program.
 
 
Iii. jQuery Program
First, let's talk about the principle of stopping the slideshow of A hovering image:
1. When the mouse is hovering over the frame, clear the timer and use clearInterval (timer) to stop the timer.
2. When the mouse leaves the top of the frame, restart the timer.
3. The hover function is used to hover and exit the mouse.
Hover (over, out) is a method that imitates a hover event (move the mouse over an object and remove it from it. This is a custom method that provides a "Keep in it" status for frequently used tasks.
Parameters:
Over (Function): the Function to be triggered when you move the cursor over an element.
Out (Function): the Function to be triggered by removing the mouse from the element.
Let's look at the jQuery program:
$ (Document ). ready (function () {var slideShow = $ (". slideShow "), // obtain the name of the outermost frame ul = slideShow. find ("ul"), showNumber = slideShow. find (". showNav span "), // obtain the button oneWidth = slideShow. find ("ul li "). eq (0 ). width (); // obtain the width of each image var timer = null; // The timer return value, mainly used to disable the timer var iNow = 0; // iNow is the index value of the image being displayed. When a user opens a webpage, the first image is displayed, that is, the index value is 0/* manually click the button to start image carousel Code */showNumber. on ("click", function () {// bind a click event for each button $ (this ). addClass ("active "). siblings (). removeClass ("active"); // click the button to add the highlighted state for this button, and remove the highlighted state of other buttons var index = $ (this ). index (); // obtain which button is clicked, that is, find the index value iNow = index; ul. animate ({"left":-oneWidth * iNow, // note that the left attribute is used here, so set position: relative in the ul style; let ul shift the width of N pictures to the left, N according to the index value of the clicked button iNow })}); /* manually click the button to complete the image carousel Code * // * timed automatic carousel Image Code start */timer = setInterval (function () {// enable the timer iNow ++; // Add 1 to the order of the image index values, so that the image can be rotated sequentially if (iNow> showNumber. length-1) {// when the last graph is reached, assign iNow to the index value of the first graph. The carousel effect jumps to the first graph and starts iNow = 0 again ;} showNumber. eq (iNow ). trigger ("click"); // simulate the trigger button's click}, 2000 ); // 2000 indicates the carousel time/* indicates the automatic carousel Image Code end * // * indicates the start of the Code for stopping the carousel image with the mouse floating */slideShow. hover (function () {clearInterval (timer) ;}, function () {timer = setInterval (function () {// enable the timer iNow ++; // Add 1 to the order of the image index values, so that the image can be rotated sequentially if (iNow> showNumber. length-1) {// when the last graph is reached, assign iNow to the index value of the first graph. The carousel effect jumps to the first graph and starts iNow = 0 again ;} showNumber. eq (iNow ). trigger ("click"); // simulate the trigger button's click}, 2000); // 2000 indicates the carousel time }); /* Stop the slideshow code after hovering the mouse over the image */})
We can see that the code for enabling the timer is repeated, so here we can define an autoPlay () function to streamline the code. The streamlined code is as follows:
/* Timed automatic carousel Image Code start */function autoPlay () {timer = setInterval (function () {// enable the timer iNow ++; // Add 1 to the order of the image index values, so that the image can be rotated sequentially if (iNow> showNumber. length-1) {// when the last graph is reached, assign iNow to the index value of the first graph. The carousel effect jumps to the first graph and starts iNow = 0 again ;} showNumber. eq (iNow ). trigger ("click"); // simulate the trigger button's click}, 2000); // 2000 indicates the carousel time} autoPlay (); /* timed automatic carousel Image Code Completion */
Do not forget to call this function after the definition is complete, that is, autoPlay ();
 
The final version of the jQuery program is as follows:
$ (Document ). ready (function () {var slideShow = $ (". slideShow "), // obtain the name of the outermost frame ul = slideShow. find ("ul"), showNumber = slideShow. find (". showNav span "), // obtain the button oneWidth = slideShow. find ("ul li "). eq (0 ). width (); // obtain the width of each image var timer = null; // The timer return value, mainly used to disable the timer var iNow = 0; // iNow is the index value of the image being displayed. When a user opens a webpage, the first image is displayed, that is, the index value is 0/* manually click the button to start image carousel Code */showNumber. on ("click", function () {// bind a click event for each button $ (this ). addClass ("active "). siblings (). removeClass ("active"); // click the button to add the highlighted state for this button, and remove the highlighted state of other buttons var index = $ (this ). index (); // obtain which button is clicked, that is, find the index value iNow = index; ul. animate ({"left":-oneWidth * iNow, // note that the left attribute is used here, so set position: relative in the ul style; let ul shift the width of N pictures to the left, N according to the index value of the clicked button iNow })}); /* manually click the button to complete the image carousel Code * // * timed automatic carousel Image Code start */function autoPlay () {timer = setInterval (function () {// enable the timer iNow ++; // Add 1 to the order of the image index values, so that the image if (iNow> showNumber. length-1) {// when the last graph is reached, assign iNow to the index value of the first graph. The carousel effect jumps to the first graph and starts iNow = 0 again ;} showNumber. eq (iNow ). trigger ("click"); // simulate the trigger button's click}, 2000); // 2000 indicates the carousel time} autoPlay (); /* timed automatic carousel Image Code Completion * // * The Code starts when the mouse hangs the picture and stops the carousel */slideShow. hover (function () {clearInterval (timer) ;}, autoPlay);/* hover the mouse over the image to stop the carousel code */})
 
I have already written round-robin graphs, basically satisfying my application in tomorrow's project ~~~~ If you have time to improve other functions of carousel Images
The idea will start designing again tomorrow. I feel like my brain is almost exhausted. The leaders say: to be creative, to be creative, or to be creative! It's a good weekend. You can freely write code ~~~~~