基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
时间：2024-04-03 20:25:36 来源：网络cs 作者：纳雷武 栏目：卖家故事 阅读：
阅读本书更多章节>>>>
使用html和js实现的一个简单小练习轮播图。大概功能主要是：
1、使用时间函数自动切换图片；
2、在图片及按钮及小圆点的父节点身上绑定事件代理，添加mouseenter及mouseleave事件类型，让鼠标移入，图片暂停，移出，图片恢复轮播；
3、在按钮的父节点身上绑定事件代理，事件类型为click，使用event.target判断点击的目标范围，让左右两个按钮，点击可以切换上一张或下一张；
4、给图片添加样式，让下面的四个小圆点会随图片变颜色；
5、在小圆点的父节点身上绑定事件代理，事件类型为click，同样使用event.target判断点击的目标范围，让小圆点可以点击并切换到对应的图片上。
依旧使用的是DOM2事件代理，详细的解释和代码步骤我都注释在下面的代码中的，请君一阅。
【注：仅作自己查看和分享学习之用】
效果图如下：
代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3881267_wfv3iyzbijg.css"></head><style> section { position: relative; height: 500px; width: 780px; border: 1px solid; margin: 100px auto; } #img { height: 100%; width: 100%; background-size: 100% 100%; } p { position: absolute; left: 50%; bottom: 0px; transform: translate(-50%, -50%); } i { height: 15px; width: 15px; background-color: gray; border-radius: 50%; display: inline-block; margin-right: 10px; } i:nth-child(1) { background-color: white; } i:nth-child(4) { margin-right: 0; } .left, .right { color: rgba(255, 255, 255, 0.7); font-size: 50px; font-weight: bolder; position: absolute; top: 50%; font-weight: 500; } .left { left: 0px; transform: translate(15%, -50%); } .right { right: 0px; transform: translate(-15%, -50%); }</style><body> <section> <span class="left iconfont icon-anniu_jiantouxiangzuo"></span> <img src="./img/冬至竹林1.jpg" alt="" id="img"> <span class="right iconfont icon-anniu-jiantouxiangyou"></span> <p></p> </section> <script src="./index.js"></script></body></html>/** 需求： * 1、自动切换图片 2、鼠标移入，图片暂停，移出，图片恢复轮播 3、左右两个按钮，点击可以切换上一张或下一张 4、下面的四个小圆点会随图片变颜色 5、小圆点可以点击并切换到对应的图片上 */ //获取把圆点节点放置的盒子节点，即p节点 let pEle = document.getElementsByTagName("p")[0]; //获取事件代理的父元素section let secEle = document.getElementsByTagName("section")[0]; let imgArr = [ "./img/冬至竹林1.jpg", "./img/冬至竹林2.jpg", "./img/冬至竹林3.jpg", "./img/冬至竹林4.jpg", ] //获取时间函数的起始下标 let i = 0; //图片有多少张，就传几个参进去，并且接收这个返回的数组 let cirArr = creatCircle(imgArr.length); //遍历cirArr数组，将圆点添加进它的父节点p节点中 cirArr.forEach(node => pEle.appendChild(node)); //获取所有的圆点节点 let iEle = document.getElementsByTagName("i"); //给每一个圆点添加上自定义属性，并赋上下标 for (let k = 0; k < iEle.length; k++) { iEle[k].dataset.index = k; } let timer; //轮播：时间函数，1秒自动换一张 function playTime() { timer = setInterval(() => { //循环展示图片 i++; //如果已经跳到最后一张，就再次回到第一张 if (i > imgArr.length - 1) { i = 0; } //给圆点添加样式，开始运行该函数 addStyleI(i); //图片标签地址（src属性） img.src = imgArr[i]; }, 1000); } playTime(); // 鼠标移入，图片暂停 secEle.addEventListener("mouseenter", function () { clearInterval(timer); timer = null; }); // 鼠标移出，图片恢复滚动 secEle.addEventListener("mouseleave", playTime); //给父节点绑定一个事件代理，点击左右按钮切换图片 secEle.addEventListener("click", function (e) { let event = e || window.event; //点击左右按钮切换图片 if (event.target.className == "left iconfont icon-anniu_jiantouxiangzuo") { i--; } if (event.target.className == "right iconfont icon-anniu-jiantouxiangyou") { i++; } if (i < 0) { i = imgArr.length - 1; } if (i == imgArr.length) {//3 i = 0; } img.src = imgArr[i]; addStyleI(i); //点击小圆点可以切换到对应的图片上 if (event.target.nodeName == "I") { console.log("11111"); //获得点击的圆点的自定义索引值 cirI = event.target.dataset.index; //替换图片 img.src = imgArr[cirI]; //更改圆点样式 addStyleI(cirI); //每当点击小圆点，i的值就会被赋成圆点下标的值 i = cirI; } }); //暂停图片滚动 function picScroll() { clearInterval(timer); } //生成圆点 function creatCircle(num) { //创建一个空数组来接收这个圆点 let iArr = []; for (let j = 0; j < num; j++) { //新增圆点节点 let circleNode = document.createElement("i"); //再把新增的圆点节点放进圆点数组中 iArr.push(circleNode); } //完成后，返回该数组 return iArr; } //给圆点添加样式 function addStyleI(index) { //圆点的默认颜色是灰色 [...iEle].forEach(node => node.style.backgroundColor = "gray"); //当跳到该图片时，圆点变成白色 iEle[index].style.backgroundColor = "white"; }本文链接：https://www.kjpai.cn/gushi/2024-04-03/153570.html，文章来源：网络cs，作者：纳雷武，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。