Write a simple version of the carousel js map

The first step should be to the idea stroked a stroke:

1. Imagine the carousel chart look like, and then the carousel view of what constitutes.

2. carousel view of their own imagination is the middle of a picture and then has been automatically switches picture.

3. The most main is the middle of a big picture.

4. You can use img pictures hang directly, but also automatically rotate after consideration, so the body can use div picture wrap, then rely on easy to achieve display effects

5. Use div of background-image display to achieve a picture, but the picture like this would have been arranged in order to go

6. position where you can use absolute positioning to achieve all the pictures are placed in a region

7. After a good picture put away, you can consider implementing a carousel effect

-----------------------------------------------------------------------

8. Use div said before displaying the picture is because you can use the display property makes the picture hidden in the display, in order to achieve the effect of Carousel

-----------------------------------------------------------------------

Like a good idea, the next step is the realization of ideas

The following code is the first to achieve the basic skeleton of the picture:

< Body > 
<! - First, write a simple carousel map, both moving pictures only, no other operations -> 
<! - this div put pictures, responsible for the entire frame -> 
< div class = "the mainBox " > 
    < div class =" PIC picBox1 " > </ div > 
    < div class =" PIC picBox2 " > </ div > 
    < div class =" PIC picBox3 " > </ div > 
    < div class =" PIC picBox4 " > </ div > 
    <div class="pic picBox5"></div>
</div>

class = 'mainBox' theme is a skeleton in its main role as a positioning reference to the following position when the picture div

Note: position in the absolute reference is not the first time the parent tag static properties, so mainbox's position should be manually set to relative

html realized in the framework, the next step is to achieve a css code

<style>
        .mainBox {
            width: 1250px;
            height: 500px;
            margin: 30px auto;
            border: 3px solid pink;
            overflow: hidden;
            border-radius: 50px 50px;
            position: relative;
        }
        .pic {
            width: 1200px;
            height: 460px;
            border: 5px solid lightskyblue;
            margin: 30px 20px;
            background-repeat: no-repeat;
            position: absolute;
        }
        .picBox1 {
            background-image:url("Hua_1.jpg");
        }
        .picBox2 {
            background-image:url("Hua_2.jpg");
        }
        .picBox3 {
            background-image:url("Hua_3.jpg");
        }
        .picBox4 {
            background-image:url("Hua_4.jpg");
        }
        .picBox5 {
            background-image:url("Hua_5.jpg");
        }
    </style>

The next step is to achieve a js code

<script>
    var pics = document.getElementsByClassName('pic');
    var index = 0;
    setInterval(function() {
        index += 1;
        if(index >= pics.length) {
            index = 0;
        }
        changeImage();
    },3000);
    var changeImage = function() {
        for(var i = 0;i < pics.length;i += 1)
            pics[i].style.display = 'none';
        pics[index].style.display = 'block';
    };
    //setInterval(function() { console.log(1)},1000);
</script>

index is the index number displayed as a picture.

Chief among these is the application display this property to achieve the image carousel effect

The most simple version of the carousel figure is the case, the next step is to write may have Carousel Figure of a button