本文共 4381 字，大约阅读时间需要 14 分钟。

JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放

静态效果图如下：

• CSS部分

*{            margin: 0;            padding: 0;        }        body{            user-select: none;        }        .banner{            position: relative;            width: 384px;            height: 470px;            margin: 50px auto;        }        .ban-image{            position: absolute;            width: 100%;            height: 100%;        }        .ban-image img{            opacity: 0;            position: absolute;            transition:1s;        }        .ban-image img.on{            opacity: 1;        }        .btn-left,.btn-right{            position: absolute;            top: 30%;            width: 45px;            margin-top: -30px;            background-color: rgba(0, 0,0, 0.5);            font-size: 18px;            text-align: center;            line-height: 60px;            color: #fff;            cursor: pointer;        }        .btn-left{            left:0px;            border-top-right-radius: 50%;            border-bottom-right-radius: 50%;        }        .btn-right{            right:0px;            border-top-left-radius: 50%;            border-bottom-left-radius: 50%;        }        .tab{            position: absolute;            bottom: 180px;            left: 15%;            transform: translateX(-50%);        }        .tab li{            float: left;            list-style: none;            width: 10px;            height: 10px;            margin-left: 5px;            border-radius: 50%;            background-color: #ccc;            cursor: pointer;        }        .tab li.on{            background-color: #f70;        }

• HTML部分

   
        
    
            
     
                 
     
                 
     
                 
     
                 
     
             
     
            
      
       <
      
            
      
       >
      
        
     
        
     
            
      
                
       
                
       
                
       
                
       
                
       
            
      
        
     
    
    
   

• JavaScript样式

var a=10;        var oBtnRight = document.querySelector('.btn-right');//获取元素的方式        var oBtnLeft = document.querySelector('.btn-left');//获取元素的方式        var aImages = document.querySelectorAll('.ban-image img');        var aTabs = document.querySelectorAll('.tab li');        var index = 0;//保存图片数组的下标              auto();//自动执行函数        //自动轮播函数        function auto(){            setInterval(function(){                aImages[index].className = '';//清空class类名                aTabs[index].style.backgroundColor = '#ccc';//也可以写成aTabs[index].className = '';                //变换index值                index ++;                index %=5;                  //设置当前样式                aImages[index].className = 'on';                aTabs[index].style.backgroundColor = '#f70';            },3000);        }                                                oBtnRight.onclick = function(){//点击事件  执行函数            //清除上一次的样式            aImages[index].className = '';//清空class类名            aTabs[index].style.backgroundColor = '#ccc';//也可以写成aTabs[index].className = '';            //变换index值            index ++;            index %=5;//如果index>=5{index =0;}               //设置当前样式            aImages[index].className = 'on';            aTabs[index].style.backgroundColor = '#f70';//也可以写成aTabs[index].className = 'on';            console.log('我点击了',aImages[index]);//测试用            console.log('我点击了',aTabs[index]);//测试用        }                oBtnLeft.onclick = function(){//点击事件  执行函数            //清除上一次的样式            aImages[index].className = '';//清空class类名            aTabs[index].style.backgroundColor = '#ccc';//也可以写成aTabs[index].className = '';            //变换index值            index --;            if(index < 0){                index =4;//注意下标从0开始            }               //设置当前样式            aImages[index].className = 'on';            aTabs[index].style.backgroundColor = '#f70';//也可以写成aTabs[index].className = 'on';            console.log('我点击了',aImages[index]);//测试用            console.log('我点击了',aTabs[index]);//测试用        }        //点击小圆点        for (var i =0;i

总：

    
       
               
   
        
    
            
     
                 
     
                 
     
                 
     
                 
     
             
     
            
      
       <
      
            
      
       >
      
        
     
        
     
            
      
                
       
                
       
                
       
                
       
                
       
            
      
        
     
    
    
    
    
   

转载地址：http://lbozi.baihongyu.com/