原生Js实现轮播图

页面结构

原理（通过图片位置的变换来实现轮播，container位置有限，一次只能显示一张，container的宽度长度就是我们能看到的轮播图的长度宽度，如果哪站图片移动到那里的时候，就显示那一张）

  <div id = "container">
    <div id="list"  style="left:-650px"> //主体
        <img class="img" src="./images/4.jpg" alt=""/>
        <img class="img" src="./images/1.jpg" alt=""/>
        <img class="img" src="./images/2.jpg" alt=""/>
        <img class="img" src="./images/3.jpg" alt=""/>
        <img class="img" src="./images/4.jpg" alt=""/>
        <img class="img" src="./images/1.jpg" alt=""/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
    </div>
    <a href="#" class="arrow"id="prev">&lt</a>
    <a href="#" class="arrow"id="next">&gt</a>
</div>

        <style>
    html *{
        padding:0;
        margin:0;
    }
    #container{
        width:600px;
        height:350px;
        overflow:hidden;
        position:relative;
        z-index:1;
    }
    #list{
        width:4000px;
        height:350px;
        position:absolute;
        z-index:1;
    }
    .img{
        float:left;
    }
    .arrow{
        width:30px;
        height:50px;
        font-size:40px;
        position:absolute;
        z-index:2;
        text-decoration:none;
        color:#fff;
    }
    .arrow:hover{
        background-color:grey;
        opacity:0.5;
        z-index:2;
    }
    #prev{
        position:absolute;
        top:150px;
        right:550px;
    }
    #next{
        position:absolute;
        top:150px;
        right:20px;     
    }
    
    #buttons{
        z-index:3;
        position:absolute;  
        bottom:20px;    
        left:200px; 
    }
    span{
        height:10px;
        width:10px;
        border-radius:50%;
        background-color:#fff;
        float:left;
        margin-right:20px;
        
    }
    .on{
        background-color:orange;
    }
     </style>

问题一：
为什么要前面后面各多加一张照片

image.png

箭头切换

定义click事件，定义animation(offest)

无限滚动

next点击时，若当前图片索引值为4(一共有4张要显示的图片）,则令index = 1；重新定位。prev点击时，若当前图片索引值为1,则令index = 4;

按钮切换

定位当前按钮索引值（getAttribute)，两个索引之差再进行计算。

定时播放

定时器。
container.onmouseover=stop;
container.onmouseout=play;

        <style>
    html *{
        padding:0;
        margin:0;
    }
    #container{
        width:600px;
        height:350px;
        overflow:hidden;
        position:relative;
        z-index:1;
    }
    #list{
        width:4000px;
        height:350px;
        position:absolute;
        z-index:1;
    }
    .img{
        float:left;
    }
    .arrow{
        width:30px;
        height:50px;
        font-size:40px;
        position:absolute;
        z-index:2;
        text-decoration:none;
        color:#fff;
    }
    .arrow:hover{
        background-color:grey;
        opacity:0.5;
        z-index:2;
    }
    #prev{
        position:absolute;
        top:150px;
        right:550px;
    }
    #next{
        position:absolute;
        top:150px;
        right:20px;     
    }
    
    #buttons{
        z-index:3;
        position:absolute;  
        bottom:20px;    
        left:200px; 
    }
    span{
        height:10px;
        width:10px;
        border-radius:50%;
        background-color:#fff;
        float:left;
        margin-right:20px;
        
    }
    .on{
        background-color:orange;
    }