Let the pictures jump up JavaScript pictures carousel effects _javascript Tips

The picture carousel effect, in the current website homepage, almost is the essential effect display. So I'm going to explain the simple implementation of this effect from three aspects.

• The picture beats up
• Realization of Image Sequence control
• Implementation of front and rear button control

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

Let's finish the structure code first, and I won't explain it in detail. Look at the effect

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.

I hope this article will help you learn about JavaScript programming.