兼容性较好的web html原生js轮播器

第一步：前端样式以及html代码（图片自行添加）

css代码：

#container{
            width: 1200px;
            height: 400px;
            margin:0 auto;                 
            overflow: hidden;/*超出的图片垂直方向隐藏，水平方向也隐藏*/
            position: relative;/*提供给子元素定位*/
        }
        #list{
            width: 7200px;
            height: 400px;
            position: absolute;

        }
        #list img{
            float:left;
        }
        #buttons{
            position: absolute;/*参照父元素进行绝对定位*/
            height: 10px;
            width: 100px;
            z-index: 2;
            bottom: 20px;
            margin: auto;
            left: 0;
            right: 0;
        }
        #buttons span{
            cursor: pointer;
            display: inline-block;
            border:1px solid #fff;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
            float: left;
        }
        #buttons .on{
            background-color: #5c307d;
        }
        .arrow{
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-size: 36px;
            width: 40px;
            height: 40px;
            position: absolute;
            z-index: 2;
            margin:auto;
            top:0;
            bottom: 0;
            background-color: #d8d9d8;
            color: #ffffff;
            text-decoration: none;
            border-radius: 50%;
            display: none;
        }
        .arrow:hover{
            background-color: #b2afaf;
        }
        #container:hover .arrow{
            display: inline-block;
        }
        #prev{
            left: 20px;
        }
        #next{
            right: 20px;
        }
        

html代码:

    

        

    

        
                                
        
        
        
    
    

    <
    >

第二步:给前一张，下一张添按钮添加事件：

第三步：封装简化点击按钮事件(js部分，其他没有改变)

    }

    next.onclick=function(){
        animate(-1200);
        
    };

    prev.onclick=function(){
        animate(1200);
        
    };
};

第四步:图片切换对应小按钮样式改变

第五步：图片无限左右切换

第六步:小按钮的点击事件

第七步：优化小按钮（点击同一个按钮不触发事件）

            

if (this.className=="on") {
                    return;
                }     
                
在buttoms循加入                


第八步:给点击事件加动画