Example sharing of jQuery implementation of dot image carousel

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;

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

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:

 //引入jquery (css代码未贴)  
  
 
     
 
 
iPhone6
 
Mate9
 
vivo X9
 
  //阻止浏览器的默认跳转  
 

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!