原生js轮播

 

作为一名前端工程师，手写轮播图应该是最基本掌握的技能，以下是我自己原生js写的轮播，欢迎指点批评；

首先css代码

a{
    text-decoration:none;color:#3DBBF5;}            *{
                    margin: 0;                padding: 0;            }            .wrapper{
                    width: 400px;                height: 300px;                margin: 100px auto;            }            #lunbo{
                    position: relative;                overflow: hidden;            }            #list{
                    position: relative;                white-space: nowrap; // 这块用行元素模拟，所以才用该属性，块元素可修改这块            }            #list span{
                    display: inline-block;                width: 400px;                height: 300px;                text-align: center;                line-height: 300px;                font-weight: bold;                font-size: 100px;                color: #fff;            }            #buttons{
                    position: absolute;                bottom: 0;                text-align: center;                width: 100%;                height: 40px;                line-height: 40px;            }            #buttons span{
                    display: inline-block;                width: 15px;                height: 5px;                background: #fff;                margin: 0 10px;                cursor: pointer;                transition: all .5s;            }            #buttons span.on{
                    height: 20px;            }            .arrow{
                    position: absolute;                top: 50%;                transform: translateY(-50%);                font-size: 80px;                font-weight: bold;                color: #fff;                opacity: .3;                transition: all .5s;            }            .wrapper:hover .arrow{
                    opacity: 1;            }            #prev{
                    left: 10px;            }            #next{
                    right: 10px;            }

然后HTML代码

      
            
       
                
        
                    
         5
         1
         2
         3
         4
         5
         1                
        
                
        
                    
                             
                             
                             
                             
                         
        
                
        <                
        >            
       
        
      

最后js代码

window.οnlοad=function  () {
               var lunBo = document.getElementById("lunbo");            var list = document.getElementById("list");            var btn = document.getElementById("buttons").getElementsByTagName('span');            var prev = document.getElementById("prev");            var next = document.getElementById('next');            var interval = 3000;            var timer;            var index = 1;            var animated = false;            for (var i=0;i
     
      0 && parseInt(list.style.left)
      
       newLeft)) { //通过条件判断到它是否还要继续进行动画                        list.style.left = parseInt(list.style.left) + speed +'px';                        setTimeout(go,interval)                     } else{
                           animated = false; //动画状态结束                        list.style.left = newLeft + 'px'; //现在的位移                        if (parseInt(list.style.left)<-2000) {   // 辅助假图                            list.style.left = -400 + 'px';                        } else if( parseInt(list.style.left)>-400){
                               list.style.left = -2000 + 'px';                        }                    }                }                go();            }            function play () {
                     timer = setTimeout(function  () {                    next.onclick();                    play();                },interval)            }            play();            function stop () {
                   clearTimeout(timer);            }            lunBo.οnmοuseοver=stop;            lunBo.οnmοuseοut=play;        }
      
     

 　　　　以上是所有代码，欢迎指点交流！