Native js achieve a simple carousel view of div

Former provincial js achieve carousel map.

Open the page automatically rotate the picture, click on the button to switch to the prev next / previous picture, click on the 1-5 switch to the corresponding picture.

Code links: https://github.com/sandraryan/practise/blob/master/js/%E8%BD%AE%E6%92%AD%E5%9B%BE.html

Probably a long way without adding images, div can be achieved

 

css code:

.wrap {
        /* 展示区域样式 */
        width: 500px;height: 400px;
        box-shadow: 0 0 10px rgba(0,0,0,.5);
        display: flex;
        overflow: hidden;
        position: relative;
    }
    .swipe {
        width: 2500px;
        display: flex;
        position: absolute;
        left : 0 ;
         / * to change the picture add transition effects, timer time can not exceed a period of time, otherwise it will conflict * / 
        Transition : .8s ; 
    } / * is broadcast round sub-element style * / 
    .box { 
        width : 500px ; height : 400px ; 
        background-Color : RGB (228, 226, 226) ; 
        Color : #fff ; 
        font-size : 200px ; 
    } 
    Button { 
        width : 100px
    ;height: 40px;
        margin: 10px 5px;
        border-radius: 8px;
        background-color: rgb(202, 202, 202);
        font-size: 22px;
        color: white;
    }

Page structure:

<!-- 一些按钮 -->
    <button class="prev">prev</button>
    <button class="next">next</button>
    <br>
    <button class="btn">one</button>
    <button class="btn">two</button>
    <button class="btn">three</button>
    <Button class = "BTN" > Four </ Button > 
    < Button class = "BTN" > Five </ Button > 
    <-! display area -> 
    < div class = "wrap" > 
        <-! is broadcast wheel parent element -> 
        < div class = "swipe" > 
            <-! is broadcast round the list of sub-elements -> 
            < div class = "Box" > box1 </ div > 
            <div class="box">box2</div>
            <div class="box">box3</div>
            <div class="box">box4</div>
            <div class="box">box5</div>
        </div>
    </div>

js code:

<Script>
     // Get element 
    var PREV = document.querySelector ( "PREV." );
     var Next document.querySelector = ( "Next." );
     var btns = document.querySelectorAll ( "BTN." );
     var swipe Document = .querySelector (. "swipe" ); 

    // AutoPlay 
    // wrapper function 
    // determination index, vary as a function of the value of the left 
    function nextFn () { 
        index = index == 0. 4: ++? index;  
         // targeting elements left to take effect 
        swipe.style.left -index * = 500 + "PX" ; 
    } 

    // function timer 
    functionthe autoPlay () { 
        autoTinmer = the setInterval ( function () {
         // left initial value is 0, the left is the number of each picture by picture image width 
        // only five images, the largest left is left four movable FIG. restore, index equal to 4 to 0 when otherwise ++ index 
       nextFn (); 
    }, 2000 ); 
    } 
    // page will automatically refresh a play; 
    autoPlay ();
     // declare the order of the current picture show 
    var index = -1 ;
     var autoTinmer; 
   
    // click next prev 
    next.onclick = function () {
         // stop automatically play the first show finished next 
        clearInterval (autoTinmer);
         // click next show immediately next
        nextFn ();
         // continue autoplay 
        autoPlay (); 
    } 
    prev.onclick = function () { 
        clearInterval (autoTinmer); 
        // clicks on a display immediately prev 
        index = index == 0 4: -? index; 
        swipe .style.left = -index * 500 + "PX" ; 
        the autoPlay (); 
    } 
    // click the button corresponding to the sequence 
    // loop through 1-5 button 
    for ( var J = 0; J <btns.length; J ++ ) {
         // each btn bind click event 
        btns [J] .onclick = function () {
             //Auto Play timer stop 
            the clearInterval (autoTinmer);
             // Get the current button is in the order of the acquired btns 
            // not be used here indexOf method, because it is a pseudo-array, not an array, the array can not use the methods 
            // getAttribute acquired as the label of the custom property value html 
            var I = the this .getAttribute ( "Data-I" );
             // the console.log (I); 
            // set according to the value of the left swipe this order 
            swipe.style.left = - * 500 + I "PX" ;
             // restore timer AutoPlay 
            the autoPlay (); 
        } 
    }
     </ Script>

the end (●ˇ∀ˇ●)