JS Basic article must see (click event Carousel Diagram Simple Implementation) _javascript skills

The carousel graph is still more common in the future application, it does not need how many lines of code can realize. But in the case of mastering only the JS basics, how do you implement it in a less logical and simple way? Here are some different ways to analyze the following:

1, the use of displacement methods to achieve

First of all, we can add a div in the body and set the width to a percentage (Adaptive page), the ratio is specific to the percentage of the words according to demand, do not say here. Put the picture in the Div.

Second, the Style section sets the IMG tag all into absolute to facilitate positioning

Finally, JS part of the logic, define two empty arrays, the first array to save the original display in the picture and waiting to enter the picture, the second array to save the rest of the n picture, assuming that the two arrays are set to: waittoshow=[];   and goout=[]; Waittoshow.shift (), eject the first picture if named Showfirst, and set the displacement and move time for the Showfirst picture, after the execution completes Showfirst puts in the goout tail: Goout.push (Showfirst)  ; At this point, the No. 0 element of the waittoshow array becomes the original second picture to display, waittoshow[0 the picture to set the shift and move time, and goout the first element of the array into the tail of the waittoshow array. Ensure that the waittoshow array is always a picture to display and a picture to be displayed, thus creating a loop through two arrays to complete the carousel graph implementation. The reverse logic is the same (because logic is too complex to recommend here)

2, the use of level to make the top of the picture changes in the practice (this approach has no displacement of the action, but the logic is very simple, very practical)

Directly to the code more intuitive point: basic each line has a comment

<! DOCTYPE html>  

Above this JS basic article must see (click event Carousel Diagram Simple Realization) is small series to share all the content, hope to give you a reference, also hope that we support cloud habitat community.