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

it2026-04-22 3

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部分 <div class="banner"> <div class="ban-image"> <a href="javascript:;"></a><img class="on" src = "images/1.jpg.webp" alt="" width="384"></a> <a href="javascript:;"></a><img src = "images/2.jpg.webp" alt="" width="384"></a> <a href="javascript:;"></a><img src = "images/3.jpg.webp" alt="" width="384"></a> <a href="javascript:;"></a><img src = "images/4.jpg.webp" alt="" width="384"></a> <a href="javascript:;"></a><img src = "images/5.jpg.webp" alt="" width="384"></a> <div class="btn"> <div class="btn-left"><</div> <div class="btn-right">></div> </div> <div class="tab"> <ul> <li class="on"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> 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<aTabs.length;i++){ aTabs[i].index =i; aTabs[i].onclick = function(){ var This = this.index; change (function(){ console.log(this,i);//点击谁就指向谁 index =This; }) } } //变换函数 function change(callback){ aImages[index].className = ''; aTabs[index].className = ''; index++; callback(); aImages[index].className = 'on'; aTabs[index].className = 'on'; lastIndex = index; }

总：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ 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; } </style> </head> <body> <div class="banner"> <div class="ban-image"> <a href="javascript:;"></a><img class="on" src = "images/1.jpg.webp" alt="" width="384"></a> <a href="javascript:;"></a><img src = "images/2.jpg.webp" alt="" width="384"></a> <a href="javascript:;"></a><img src = "images/3.jpg.webp" alt="" width="384"></a> <a href="javascript:;"></a><img src = "images/4.jpg.webp" alt="" width="384"></a> <a href="javascript:;"></a><img src = "images/5.jpg.webp" alt="" width="384"></a> <div class="btn"> <div class="btn-left"><</div> <div class="btn-right">></div> </div> <div class="tab"> <ul> <li class="on"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <script> 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<aTabs.length;i++){ aTabs[i].index =i; aTabs[i].onclick = function(){ var This = this.index; change (function(){ console.log(this,i);//点击谁就指向谁 index =This; }) } } //变换函数 function change(callback){ aImages[index].className = ''; aTabs[index].className = ''; index++; callback(); aImages[index].className = 'on'; aTabs[index].className = 'on'; lastIndex = index; } </script> </body> </html>

最新回复(0)