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