JS Special effects-Seamless carousel map, simple to start __js

First, let everyone see the effect:

then I'll introduce you to the principle of the seamless carousel diagram.

1. We will use a lot of Li in a UL, each Li embedded in a picture, if the carousel analogy to slow video, each picture is a frame (note: Many beginners will think that some pictures are dynamically generated, in fact, each picture has been set in the HTML, Just show the time, use Overflow:hidden, hide it, draw a picture below so that everyone can understand

2: Now start defining animation functions animate let the UL in the Div scrolling, through the UL positioning in Style.left attribute value with SetInterval function, is perfect

3. The play is coming, I think you understand this, even if you have mastered it.

think about it: how to make the last picture and the first picture seamlessly connected in a clever way

principle Explanation:

1. Interface initialization: UL 5 Li, each width is 500px; When you set the width of the UL, direct the UL width set to 3000px;

2. When JS load, the first picture copy, loaded to Li's last, so the UL total 6 li,width natural is 3000px;

3. Then the key: When the carousel to the fifth picture, the sixth picture can achieve seamless switching, this time is the wheel to the sixth Li, that is, the first picture, this time to the UL left set to 0;

4. Is returned to the first picture, in fact, in the display of the sixth picture, in fact, the first display, as the direct setting of left:0px, there will be no visual changes. So when we slipped to the sixth Li, we went back to the position of the first picture. Do not understand directly on the code;

4. The above is to achieve seamless carousel switch, about the other some click Switch and picture list is not difficult, nothing to say, I have written in the code, we are interested to download a look at

Source Address: https://github.com/Magiccwl/JS_specialeffects