兼容性较好的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代码:

<div id="container">
    <div id="list" style="left:0px;">
        <img src="1.jpg" alt="1">
        <img src="2.jpg" alt="2">
        <img src="3.jpg" alt="3">
        <img src="4.jpg" alt=".4">
        <img src="5.jpg" alt="5">
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>                        
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <div style="clear: both;"></div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

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

<script type="text/javascript">
        //下一页
        window.onload=function(){
            var list=document.getElementById("list");//获取相册div，便于移动相册框的图片
            var prev=document.getElementById('prev');//前一张图片按钮
            var next=document.getElementById('next');//下一页按钮

            next.onclick=function(){
                if(!(parseInt(list.style.left)<=-4800)){//向超过第5张图片不能继续向右
                    list.style.left=parseInt(list.style.left)-1200+"px";
                }
                
            };

            prev.onclick=function(){
                if((parseInt(list.style.left)<0)){//向左超过第1张图片不能继续向左
                    list.style.left=parseInt(list.style.left)+1200+"px";
                }
                
            };
        };
    </script>

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

<script type="text/javascript">
window.onload=function(){
    var list=document.getElementById("list");//获取相册div，便于移动相册框的图片
    var prev=document.getElementById('prev');//前一张图片按钮
    var next=document.getElementById('next');//下一页按钮            
    //上一页,下一页点击按钮函数
    function animate(offset){
        var left=list.style.left;//图片位置
        var leftOffset=parseInt(left);//图片偏移量

        if (offset==-1200) {
        if(!(leftOffset<=-4800)){//向超过第5张图片不能继续向右
            left=(leftOffset+offset)+'px';
            list.style.left=left;
        }
        return;
        }
        
        if (offset==1200) {
            if((leftOffset<0)){//向左超过第1张图片不能继续向左
            left=(leftOffset+offset)+"px";
            list.style.left=left;                    
            }
        }

    }

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

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

</script>

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

<script type="text/javascript">
        window.onload=function(){
            var list=document.getElementById("list");//获取相册div，便于移动相册框的图片
            var prev=document.getElementById('prev');//前一张图片按钮
            var next=document.getElementById('next');//下一页按钮    
            var index=1;//默认小按钮为1
            var buttons=document.getElementById("buttons").getElementsByTagName('span');

            //上一页,下一页点击按钮函数
            function animate(offset){
                var left=list.style.left;//图片位置
                var leftOffset=parseInt(left);//图片偏移量

                if (offset==-1200) {
                if(!(leftOffset<=-4800)){//向超过第5张图片不能继续向右
                    left=(leftOffset+offset)+'px';
                    list.style.left=left;
                }
                return;
                }
                
                if (offset==1200) {
                    if((leftOffset<0)){//向左超过第1张图片不能继续向左
                    left=(leftOffset+offset)+"px";
                    list.style.left=left;                    
                    }
                }
            }

            //按钮样式改变函数
            function showButton(){
                for (var i = 0; i <buttons.length; i++) {
                    if (buttons[i].className=="on") {
                        buttons[i].className="";
                        break;
                    }
                }

                buttons[index-1].className="on";
            }

            next.onclick=function(){
                if (index==5) {//如果小按钮已经到了第五个小按钮，下一个小按钮切换回1
                    index=1;
                }else{//不是第五个，就继续++
                    index+=1;
                }

                animate(-1200);
                showButton();
                
            };

            prev.onclick=function(){
                
                if (index==1) {//如果小按钮已经到了第1个小按钮，上一个小按钮切换回5
                    index=1;
                }else{//不是第1个，就继续--
                    index-=1;
                }
                animate(1200);
                showButton();
                
            };
        };
    </script>
    

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

<script type="text/javascript">
        window.onload=function(){
            var list=document.getElementById("list");//获取相册div，便于移动相册框的图片
            var prev=document.getElementById('prev');//前一张图片按钮
            var next=document.getElementById('next');//下一页按钮    
            var index=1;//默认小按钮为1
            var buttons=document.getElementById("buttons").getElementsByTagName('span');

            //上一页,下一页点击按钮函数
            function animate(offset){
                var left=list.style.left;//图片位置
                var leftOffset=parseInt(left);//图片偏移量

                if (offset==-1200) {
                if(!(leftOffset<=-4800)){//向超过第5张图片不能继续向右
                    left=(leftOffset+offset)+'px';
                    list.style.left=left;
                }

                if (leftOffset==-4800) {//超过第5张得时候重新回到第一张
                    list.style.left=0+'px';
                    index=1;//更新一下按钮
                }

                return;
                }
                
                if (offset==1200) {
                    if((leftOffset<0)){//向左超过第1张图片不能继续向左
                    left=(leftOffset+offset)+"px";
                    list.style.left=left;                    
                    }

                    if (leftOffset==0) {//超过第1张得时候重新回到第5张
                    list.style.left=-3600+'px';
                    index=5;//更新一下按钮

                }

                }
            }

            //按钮样式改变函数
            function showButton(){
                for (var i = 0; i <buttons.length; i++) {
                    if (buttons[i].className=="on") {
                        buttons[i].className="";
                        break;
                    }
                }

                buttons[index-1].className="on";
            }

            next.onclick=function(){
                if (index==5) {//如果小按钮已经到了第五个小按钮，下一个小按钮切换回1
                    index=1;
                }else{//不是第五个，就继续++
                    index+=1;
                }

                animate(-1200);
                showButton();
                
            };

            prev.onclick=function(){
                
                if (index==1) {//如果小按钮已经到了第1个小按钮，上一个小按钮切换回5
                    index=1;
                }else{//不是第1个，就继续--
                    index-=1;
                }
                animate(1200);
                showButton();
                
            };
        };
    </script>
    

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

<script type="text/javascript">
        window.onload=function(){
            var list=document.getElementById("list");//获取相册div，便于移动相册框的图片
            var prev=document.getElementById('prev');//前一张图片按钮
            var next=document.getElementById('next');//下一页按钮    
            var index=1;//默认小按钮为1
            var buttons=document.getElementById("buttons").getElementsByTagName('span');

            //上一页,下一页点击按钮函数
            function animate(offset,jump="num"){
                var left=list.style.left;//图片位置
                var leftOffset=parseInt(left);//图片偏移量

                if (offset==-1200&&jump=="num") {
                if(!(leftOffset<=-4800)){//向超过第5张图片不能继续向右
                    left=(leftOffset+offset)+'px';
                    list.style.left=left;
                }

                if (leftOffset==-4800) {//超过第5张得时候重新回到第一张
                    list.style.left=0+'px';
                    index=1;//更新一下按钮
                }

                return;
                }
                
                if (offset==1200&&jump=="num") {
                    if((leftOffset<0)){//向左超过第1张图片不能继续向左
                    left=(leftOffset+offset)+"px";
                    list.style.left=left;                    
                    }

                    if (leftOffset==0) {//超过第1张得时候重新回到第5张
                    list.style.left=-3600+'px';
                    index=5;//更新一下按钮
                }
                return;

                }

                if (parseInt(jump)>0) {//向右跳转
                    var offsetjump=-1200*jump;
                    left=(leftOffset+offsetjump)+'px';
                    list.style.left=left;
                    return;
                }
                if (parseInt(jump)<0) {//向左跳转
                    var offsetjump=-1200*jump;
                    left=(leftOffset+offsetjump)+'px';
                    list.style.left=left;
                    return;
                }

            }

            //按钮样式改变函数
            function showButton(){
                for (var i = 0; i <buttons.length; i++) {
                    if (buttons[i].className=="on") {
                        buttons[i].className="";
                        break;
                    }
                }

                buttons[index-1].className="on";
            }

            next.onclick=function(){
                if (index==5) {//如果小按钮已经到了第五个小按钮，下一个小按钮切换回1
                    index=1;
                }else{//不是第五个，就继续++
                    index+=1;
                }

                animate(-1200);
                showButton();
                
            };

            prev.onclick=function(){
                
                if (index==1) {//如果小按钮已经到了第1个小按钮，上一个小按钮切换回5
                    index=1;
                }else{//不是第1个，就继续--
                    index-=1;
                }
                animate(1200);
                showButton();
                
            };

        //为每个小按钮绑定事件
        for (var i = 0; i <buttons.length; i++) {
                buttons[i].onclick=function(){
                    var myIndex=parseInt(this.getAttribute('index'));//当前按钮下标
                    if(myIndex-index>0){//向右偏移
                        animate(-1200,myIndex-index);
                        
                        index=myIndex;//更新按钮
                        showButton();
                    }else{
                        animate(1200,myIndex-index);
                        index=myIndex;//更新按钮
                        showButton();
                    }
                    
                }
            }
        };
    </script>
    

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

            

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


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