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

Html+CSS+JS轮播图：手动轮播，自动轮播
演示效果轮播图代码: <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
使用html和js实现的一个简单小练习轮播图.大概功能主要是: 1.使用时间函数自动切换图片: 2.在图片及按钮及小圆点的父节点身上绑定事件代理,添加mouseenter及mouseleave事件类型 ...
js轮播图（自动轮播箭头轮播序号轮播）
图片路径用自己的就好 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
如何使用JQ封装轮播图实现自动轮播、点击切换等效果..
css部分: *{margin: 0;padding: 0;}#banner{width: 800px;height: 500px;margin: 30px auto;position: relati ...
vue列表左右箭头滑动_vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）...
1.效果图如下 2.vue代码如下 indicator-position="none" :autoplay="false"> > {{items.b ...
用jquery简单的实现京东轮播图效果
用jquery简单的实现京东轮播图效果## 标题 html部分 <!DOCTYPE html> <html lang="en"><head>&l ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
原生JavaScript轮播图效果实现
原生JavaScript实现轮播图切换效果的实现过程本文所用代码仅供个人学习.此部分代码系按原腾讯电脑管家首页的轮播图效果,采用原生JS技术予以实现(原网页采用jQurey等技术). 1. 文件准备 ...
用JavaScript实现网页无限轮播图效果，附整套源码
用JavaScript实现无限轮播图效果(附源码) javascript群内每日课题-今日课题:用JavaScript实现无限轮播图效果 PS:很多企业通用的案例自己再学习过程中肯定是要熟练的,所以今 ...

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

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

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

最新文章

热门文章