JavaScript to achieve a picture carousel effect (i) Let the picture beat up _javascript skills

The picture carousel effect, in each Big website homepage All can see, more common. The following small series to share the effect of the simple implementation.

1. The picture beats up

2. The realization of picture sequence control

3. The implementation of front and rear button control

This article looks at the pictures to switch between the time interval.

Let's start with the structure code, and I'm not going to explain it in detail. Let's show you the effect chart:

The code is as follows:

<!
DOCTYPE html>  

OK, now we can control the jump of the picture through JS.

First we need to find the location of the picture, where we are through the UL layout, so first of all to find the number of UL under the LI

Then let a picture of a display, we use the window mode, is the mask layer mode. #slider是一个视窗, UL is the view outside the window, and the UL landscape is horizontal typesetting

Then let the outside view appear as the size of the window, that is, let each picture as a window view, this is to control the size of the picture to the same size as the window.

Explained above is a concept, that is, the layout of the processing, the following we JS control, to achieve the picture interval display is different. We need to use JS setinterval or settimeout. Here we use SetInterval (because it's easy to use).

Every jump at once, we control is the UL position left, this allows the UL under the scenery, each time is not the same, and this left is based on the width of the window to decide, the first left is of course-800 * 0, the second is -800*1, the third is-800 *2 ... and so on. So we can draw the following code.

<script>
(function () {
var slider = document.getElementById ("slider");
var Imgul = slider.getelementsbytagname ("ul") [0];
var imglis = imgul.getelementsbytagname ("li");
var len = imglis.length;
var index = 0;
SetInterval (function () {
if (index >= len) {
index = 0;
}
Imgul.style.left =-(* index) + "px";
index++
},2000);
();
</script>

JS code this looks very simple. I'm here to set the 2-second jump sequence, and then jump more than equal to the number of pictures, let it return to the first picture.

The above content is a small series to introduce JavaScript to achieve the image of the Carousel effect (a) Let the picture beat up the whole content, hope to help everyone.