Js-焦点轮播图

• HTML部分：

    

        

            

                
                    ![](../images/1.jpeg)
                
            
            

                
                    ![](../images/2.jpeg)
                
            
            

                
                    ![](../images/3.jpeg)
                
            
            

                
                    ![](../images/4.jpeg)
                
            
            

                
                    ![](../images/5.jpeg)
                
            
            

                
                    ![](../images/6.jpeg)
                
            
        
    
    

        
        
        
        
        
        
        
        
    

• CSS部分：

 *{
       margin:0;
       padding:0;
       border:none;
       }
        .all{
            width: 310px;
            height: 260px;
            position: relative;
            margin: 100px auto;
            overflow: hidden;
        }
        .top{
            width: 310px;
            height: 220px;
        }
        .main-img{
            position: absolute;
            width: 310px;
            height: 220px;
        }
        .main-img img{
            width: 100%;
            height: 100%;
        }
        .bottom{
            text-align: center;
        }
        .left,.right{
            width: 20px;
            height: 34px;
            position: absolute;
            top:50%;
            margin-top: -34px;
            background: url(../images/icon.png);
        }
        .left{
            background-position:0 0;
            left: 0;
        }
        .right{
            background-position:-9px -45px;
            right: 0;
        }
        .icon{
            width: 20px;
            height: 5px;
            background: url(../images/icon.png) -24px -790px;
            display: inline-block;
            margin:5px;
            text-indent: 20em;
        }
       .curr{
           background-position: 0 -770px;
       }

• JS部分：

 window.onload = function () {
        var all = document.getElementById('all');
        var main = document.getElementById('main');
        var bottom = document.getElementById('bottom');
        var pics = main.children;
        var allW = all.offsetWidth;
        var iNow = 0 ;
        //动态添加span
        for(var i=0;ipics.length-1){
                        iNow = 0;
                    }
                    pics[iNow].style.left = allW+"px";
                    buffer(pics[iNow],{left:0})
                }
 else{
                        var index = this.innerHTML -1;
                    if(index>iNow){
                        buffer(pics[iNow], {left: -allW});
                        iNow = index;
                        pics[iNow].style.left = allW+"px";
                        buffer(pics[iNow],{left:0})
                    }else if(indexpics.length-1){
                iNow = 0;
            }
            pics[iNow].style.left = allW+"px";
            buffer(pics[iNow],{left:0})
            //调用排他思想变换颜色的函数
            change();
        }
        //当移动到slider上的时候停止定时器，移开的时候开启定时器//
        all.onmouseover = function () {
            clearInterval(timer);
        }
        all.onmouseout = function () {
            timer = setInterval(go,1000);
        }

    }

• 动画封装到了JS里面，需要用js库。