JavaScript case-carousel diagram

table of Contents

1. Sorting out the knowledge points of the carousel diagram

Second, the page structure of the carousel

Third, the package function that needs to be used-get the element attribute getStyle(), image displacement move()

Fourth, the carousel diagram js part

---

 

1. Sorting out the knowledge points of the carousel diagram

1. Picture automatic carousel-interval timer, picture element displacement move function

2. The mouse moves in/out, the picture stops/starts the carousel--clear the timer, onmouseenter, onmouseleave

3. Left and right arrow event picture switching --n++, n--, picture displacement move function

4. Each small dot click event corresponds to picture switching-background style setting

Second, the page structure of the carousel

box>ul>li>img

A total of five pictures, the last picture = the first picture-to achieve a seamless carousel effect

Third, the package function that needs to be used-get the element attribute getStyle(), image displacement move()

   

Fourth, the carousel diagram js part

1. Picture carousel-interval timer, mobile ul displacement

  

2. Move the mouse in and out - turn off the timer and turn on the timer

  

3. Click on the left and right arrows to switch pictures

4. For each small dot event-the first for, set the custom attribute index to mark the subscript of each dot, pay attention to clear all the small dots clicked by the user style-the second for, and then set Current dot style