Realization slide

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="jQuery.js"></script>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            background-color:;#eeeeee
        }
        .slide-container{
            width:500px;
            height:250px;
            margin:200px auto;
            background-color: red;
            position:relative;

            box-sizing: border-box;        }
        .slide-main{
            width:100%;
            height:220px;
            background-color: black;
            box-sizing: border-box;
        }
        .slide-dot{
            width:100%;
            height:30px;

            box-sizing: border-box;
            background-color: blue;
            padding-top:5px;
        }
        .slide-dot>span{
          cursor:pointer;
          height: 13px;
          width: 13px;
          margin: 0 2px;
          background-color: #bbb;
          border-radius: 50%;
          display: inline-block;
          transition: background-color 0.6s ease;

        }
        .slide-index {
          color: #f2f2f2;
          font-size: 12px;
          padding: 8px 12px;
          position: absolute;
          top: 0;
        }
        .slide-img{
            width:100%;
            height:100%;
        }
        .myslide{
            position: relative;
            height:220px;
            display: none;
        }
        .slide-text{
            box-sizing: border-box;
            color: #f2f2f2;
              font-size: 15px;
              padding: 8px 12px;
              position: absolute;
              width: 100%;
              text-align: center;
              bottom:20px;
        }
        .slide-main>.active{
            display: block;
        }
        .slide-dot>span.active ,.slide-dot>span:hover{
            background-color: pink;
        }

    </style>
</head> 
< Body > 
    <-! Slideshow -> 
    < div class = "Slide-Container" > 
        <-! Slideshow picture area -> 
        < div class = "Slide-main" > 
            < div class = "of mySlide Active " > 
                <-! display index position -> 
                < div class =" Slide-index " > </ div > 
                < IMG the src =" https://c.runoob.com/wp-content/uploads/2017/ 01 / img_fjords_wide.jpg " alt =" " class="slide-img">
                <!--Text display -> 
                < div class = "Slide-text" > 
                    fine today 1 
                </ div > 
            </ div > 
            < div class = "of mySlide" > 
                <-! Display the index position -> 
                < div class = "Slide-index" > </ div > 
                < IMG the src = "https://c.runoob.com/wp-content/uploads/2017/01/img_fjords_wide.jpg" Alt = "" class = "Slide-IMG" > 
                <! - text ->
                <div class="slide-text"> 
                    Nice day 2 
                </ div > 
            </ div > 
            < div class = "of mySlide" > 
                <-! Display the index position -> 
                < div class = "Slide-index" > </ div > 
                < img src = "https://c.runoob.com/wp-content/uploads/2017/01/img_fjords_wide.jpg" Alt = "" class = "Slide-IMG" > 
                <-! text -> 
                < div class = "Slide-text" >
                    The weather today is good 3 
                </ div >
            </div>

        </div>
        <!--幻灯片的圆点部分-->
        <div class="slide-dot" align="center">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>

</body>
<script type="text/javascript">
    / ** /
    Here unified named Slide/ *
    

     
    First acquiring dot myslide dom elements in the array and span elements in the array begins to change at a first default every function which is not removed from the active to the class I according to the current index added active class name * / 

    var myslides = document.getElementsByClassName ( " mySlide " );
     var DOT = document.getElementsByClassName ( " DOT " ) [ 0 ];
     var Spans = document.getElementsByTagName ( " span " );
     var slideIndex = document.getElementsByClassName ( " Slide-index " );
     var length =spans.length;
     var index =  0 ; // this is the first element 
    function changeSlide () {
         // said elements have remove Active 
        for ( var I = 0 ; I < length; I ++ ) { 
            Spans [I]. className = Spans [I] .className.replace ( " Active " , "" ); 
            myslides [I] .className = myslides [I] .className.replace ( " Active " , "" ); 
        } 
        the console.log (index);
        myslides[index].className+=" active";
        spans[index].className+=" active";
        slideIndex[index].innerHTML = index+1+"/"+length;
        //判断是否超出
        if(++index>=length){
            index=0;
        }
        
    }
    setInterval(changeSlide, 2000);

</script>
</html>
Guess you like
