Simple implementation of js Click Event carousel Images

The following is a basic JavaScript article (simple implementation of click event carousel ). I think this is quite good. Now I will share it with you and give you a reference. Let's take a look at the small series. Carousel images are common in future applications and can be implemented without many lines of code. But with only the basic knowledge of js, how can we implement it in a few simple logic methods? The following describes several different practices:

1. Implementation using the displacement method

First, we can add a p in the body and set the width to the percentage (Adaptive Page). The ratio is specific to the percentage of the relative person. We will do it as needed. Put the image in p.

Second, the style part sets all the img labels to absolute for easy positioning.

Finally, the js part describes the logic and defines two empty arrays. The first array is used to save the initial images displayed on the page and the images waiting for entry. The second array stores the remaining n images, assume that the two arrays are respectively set to: waitToShow = []; and goOut = []; waitToShow. shift (); the first image is named showFirst, and the displacement and moving time are set for the showFirst image. After the execution is complete, showFirst is placed at the end of goOut: goOut. push (showFirst); then the 0th elements in the waitToShow array are changed to the original second image to be displayed, and the shift and movement time are set for the image waitToShow [0, in addition, the first element image of the goOut array is popped up and placed at the end of the waitToShow array to ensure that the waitToShow array is always a display image and an image to be displayed, in this way, two arrays form a loop to implement carousel images. The reverse logic is the same (not recommended because the logic is too complicated)

2. Use the level to change the top image (this method has no displacement action, but the logic is very simple and practical)

Let's get code straight: there are comments on each line.

 Carousel image (flash adaptive)