原生js 轮播图

功能：

• 自动轮播
• 箭头向左向右切换
• 小圆点点击切换

html:

    
     
    


    

        

            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
 
            

                
                    
                
            
            
        
        
        

            
            
            
            
            
        
        
        <
        >
    
    
    

css:

/* 父容器设置为相对定位，方便后面的小圆点和箭头布局， 子绝父相*/
#container{
    position: relative;
}

#banner,
#banner li{
    list-style:none;
    margin: 0;
    padding: 0;
}

#banner{
    position: absolute;
}

#banner li{
    float: left;
}

#banner li img{
    display:block;
}

#dots{
    position: absolute;
    bottom: 20px;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
}

#dots span{
    cursor: pointer;
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #333;
    margin-right: 5px;
}

#dots .current{
    background: orangered;
}

.arrow{
    cursor: pointer;
    display: none;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    width: 40px;
    position: absolute;
    z-index: 2;
    top: 50%;
    transform:translateY(-50%);
    background: rgba(0,0,0,.3);
    color: #fff;
}

#prev{
    left: 20px;
}

#next{
    right: 20px;
}

#container:hover .arrow{
    display: block;
}

js:

window.onload = function(){
    var container = document.getElementById("container");
    var banner = document.getElementById("banner");
    var imgBoxs = document.querySelectorAll("#banner li");
    var imgs = document.querySelectorAll("#banner img");
    var img = imgs[0];
    var imgW = img.offsetWidth;
    var imgH = img.offsetHeight;
    
    /* 设置最外层盒子的高宽 */
    container.style.width = imgW + "px";
    container.style.height = imgH + "px";
    container.style.overflow = "hidden";
    
    banner.style.height = imgH + "px";
    banner.style.width = imgW * imgBoxs.length + "px";
    banner.style.left = - imgW + "px";
        
    
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    
    var currentIndex = 1;// currentIndex : 1, 2 ... , imgBoxs.length - 2
    
    prev.onclick = function(){
        currentIndex --;
        animate(banner, - currentIndex * imgW, imgW, imgBoxs.length);
        
        if(currentIndex == 0){
            currentIndex = imgBoxs.length - 2;     
        }
        
        setCurrentButtonStyle(currentIndex - 1);
    }
    
    next.onclick = function(){
        currentIndex ++;
        animate(banner, - currentIndex * imgW, imgW, imgBoxs.length);
        
        if(currentIndex == imgBoxs.length - 1){
            currentIndex = 1;
        } 
        
        setCurrentButtonStyle(currentIndex - 1);
    }
     
    function setCurrentButtonStyle(index){ 
        var spans = document.querySelectorAll("#dots span");
        for(var i = 0; i < spans.length; i++){
            spans[i].className = "";
        } 
        
        spans[index].className = "current";
    }
    
    var spans = document.querySelectorAll("#dots span");
    for(var i = 0; i < spans.length; i++){
        spans[i].index = i;//缓存i
        spans[i].onclick = function(){
            currentIndex = this.index + 1;
            animate(banner, - currentIndex * imgW);
            setCurrentButtonStyle(this.index);               
        }
    }
    
    /* 开启自动轮播 */
    var autoTimer = setInterval(function(){               
        next.click();
    }, 2000);

    container.onmouseover = function(){
        clearInterval(autoTimer);
        autoTimer = null;
    }
    
    container.onmouseout = function(){
        autoTimer = setInterval(function(){               
            next.click();
        }, 2000);
    }
          
    
    // 图片顺序：5 1 2 3 4 5 1
    // 假的第一张：left = - imgW * (len - 1)
    // 假的最后一张： left = 0
    // next: 开始过渡到假的第一张时，开启和过渡时长相等的定时器， 过渡完成立即设置left为真的第一张上
    // prev:  开始过渡到假的最后一张时，开启和过渡时长相等的定时器， 过渡完成立即设置left为真的最后一张上
    //tansition 有坑，只对首尾状态有效，不能再一个函数内先取消动画，再开启，所以借助定时器
    function animate(element, leftTarget, imgW, len){
        element.style.transition = "left 0.5s linear";
        element.style.left = leftTarget + "px";
        if(leftTarget == (- imgW * (len - 1))){//next
            setTimeout(function(){
                element.style.transition = "left 0s linear";
                element.style.left = - imgW + "px";
            }, 500);
        }else if(leftTarget == 0){//prev
            setTimeout(function(){
                element.style.transition = "left 0s linear";
                element.style.left = - imgW * (len - 2) + "px";
            }, 500);
        }
    }
 
}