Learning slowly, do today Carousel Figure it all together under review

html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 613px;
            height: 230px;
            margin: 0 auto;
            position: relative;
        }
        .box img{
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left: 0;
        }
        .ctrols{
            width: 112px;
            height: 16px;
            position: absolute;
            bottom: 26px;
            right: 60px;
            z-index: 999;
        }
        .ctrols span{
            display: inline-block;
            border: 2px solid #fff;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
            background-color: rgb(0,0,0,.2);
        }
        .box img:nth-child(1){
           z-index: 1;
        }
        .ctrols span:nth-child(5){
            margin-right: 0;
        }
        .ctrols span.on{
            background-color: orange;
        }
        .arrow-left ,.arrow-right{
            position: absolute;
            top: 50%;
            width: 30px;
            height: 50px;
            margin-top: -25px;
            background-color:rgb(0,0,0,.2);
            z-index: 10;
            font-size: 30px;
            color: #fff;
            text-align: center; 
            Line-height : 50px ; 
        } 
        .arrow-left { 
            left : 0 ; 
        } 
        .arrow-right { 
            right : 0 ; 
        } 
    </ style > 
</ head > 
< body > 
    < div class = "Box" > 
        < IMG the src = "ImagesRF Royalty Free / img01.jpg" /> // that we can change the picture with 
        < img src = "ImagesRF Royalty Free / img02.jpg" /> 
        <img src="images/img03.jpg"/>
        <img src="images/img04.jpg"/>
        <img src="images/img05.jpg"/>
        <div class="ctrols">
            <span class="on"></span><span></span><span></span><span></span><span></span>
        </div>
        <div class="arrow">
            <div class="arrow-left"><</div>
            <div class="arrow-right">></div>
        </div>
    </div>
</body>
</html>

js code:

<Script>
         var Spans = document.getElementsByTagName ( "span" );
         var imgs = document.getElementsByTagName ( "IMG" );
         var arrowLeft = document.getElementsByClassName ( "left-arrow arrow") [0 ];
         var arrowRight = document.getElementsByClassName ( "right-arrow arrow") [0 ];
         var STEP = 0; // current number of picture 
        // cycle is to span 
        for ( var I = 0; I <spans.length; I ++ ) { 
            Spans [I]. IDX = i; // add an attribute element in a span value of i remember 
            Spans [i] = .onclick function () {
                STEP = the this .idx;
                 // cancel the timer 
                the clearInterval (Timer); 
                changeImg ( the this .idx); 
            } 
        } 
        var Timer = the setInterval ( function () { 
            STEP ++ ;
             IF (STEP ===. 5 ) { 
                STEP = 0 ; 
            } 
            changeImg (STEP); 
        }, 2000 );
         // package a picture switching function 
            function changeImg (a) {
         // make picture display
        // corresponding display, other hidden 
        // let all the hidden 
            for ( var J = 0; J <imgs.length; J ++ ) { 
                imgs [J] .style.display = "none" ; 
                Spans [J] .className = "" ; 
            } 
        // let the display image corresponding to 
               imgs [a] .style.display = "Block" ;
         // current span style set to ON 
        // let out all span ON 
        // then set the corresponding span 
               Spans [A] .className = "ON" ; 
        } 
        // left click 
        arrowLeft.onclick = function () {  
            the clearInterval (Timer);
            STEP -;
            if(step<0){
                step = 4;
            }
            changeImg(step);
        }
        //右单击
        arrowRight.onclick = function(){
            clearInterval(timer);
            step++;
            if(step>4){
                step = 0;
            }
            changeImg(step);
        }
    </script>

Static effects:

Learning slowly, do today Carousel Figure it all together under review

Guess you like