Loading... ## 前言   轮播图是前端最基本、最常见的功能，不论web端还是移动端，大平台还是小网站，大多在首页都会放一个轮播图效果。本教程讲解怎么实现一个简单的轮播图效果。学习本教程之前，读者需要具备html和css技能。   好了,话不多说,下面给大家带来详细的轮播图教程。 ## 开始制作 创建一个html页面，并创建轮播图框架，代码如下所示： ```html <body> <!-- 轮播图显示区域 --> <div id="wrap"> <!-- 图片列表 --> <div class="img-list"> <img src="img/pic1.jpg"> <img src="img/pic2.jpg"> <img src="img/pic2.jpg"> <img src="img/pic4.jpg"> <img src="img/pic5.jpg"> </div> <!-- 小箭头 --> <div class="arrow"> <a href="javascript:;" class="left"><</a> <a href="javascript:;" class="right">></a> </div> <!-- 小圆点 --> <ul class="circle-list"> <li class="circle active" data-n="0"></li> <li class="circle" data-n="1"></li> <li class="circle" data-n="2"></li> <li class="circle" data-n="3"></li> <li class="circle" data-n="4"></li> </ul> </div> </body> ``` 还需要创建样式文件：banner.css，样式代码如下： ```css * { margin: 0; padding: 0; } #wrap ul { list-style: none; } #wrap { overflow: hidden; position: relative; width: 459px; height: 202px; margin: 10px auto; } #wrap .img-list { display: flex; position: relative; left: 0px; width: 459px; height: 202px; transition: 0.5s ease; } #wrap .img-list img { width: 100%; cursor: pointer; border-radius: 5px; } #wrap a { position: absolute; top: 50%; transform: translate(0, -50%); display: block; width: 40px; height: 70px; background-color: rgba(0, 0, 0, 0.7); color: white; user-select: none; font-size: 30px; text-align: center; line-height: 70px; text-decoration: none; display: none; } #wrap a.left { left: 0; } #wrap a.right { right: 0; } .circle-list { padding-left: 0px; list-style: none; position: absolute; right: 20px; bottom: 20px; z-index: 1000; } .circle-list>.circle { display: inline-block; margin-left: 10px; width: 10px; height: 10px; border: 2px solid transparent; border-radius: 50%; background-color: #fff; vertical-align: middle; cursor: pointer; border-color: rgba(255, 255, 255, 1); } .circle-list>.circle.active { border-width: 0; border-color: transparent; background-color: transparent; background-image: url(../img/dot.png); background-size: cover; background-repeat: no-repeat; transform: scale(1.8); } .circle-list>.circle.active:hover { background-color: transparent; transform: scale(1.8); } .circle-list>.circle:hover { background-color: #00aaff; transform: scale(1.2); } /* 不显示左右箭头 */ #wrap:hover .arrow a { display: none; } ``` 现在查看页面，能够看到轮播图的基本框架已经出来了，现在还有最后一个操作，使用脚本使其自动播放和悬浮至不同的“点”上时，显示不同的图片。 脚本代码需要放在body结束标签的之前： ```javascript <script type="text/javascript"> let oLeft = document.querySelector(".left"); let oRight = document.querySelector(".right"); let oImgList = document.querySelector(".img-list"); // 图片宽度 let imgWidth = 459; // 克隆第一张图片 let clonefirstImg = oImgList.firstElementChild.cloneNode(); // 将第一张图片添加至图片列表的末尾 oImgList.appendChild(clonefirstImg); // 图片索引 代表当前是第几张图片 index:0代表第一张图片 let index = 0; // 设置函数节流锁 let lock = true; function handleRightBtn() { if (!lock) return; index++; // 减去图片的宽度 oImgList.style.left = index * -imgWidth + "px"; // 为什么要加过渡? 因为切换到了最后一张假图时会将过渡去掉 oImgList.style.transition = "0.5s ease"; if (index === 5) { index = 0; setTimeout(() => { oImgList.style.left = 0; // 取消过渡 500毫秒之后切换第一张 oImgList.style.transition = "none"; }, 500); } // 设置小圆点的高亮 setCircles(); // 关锁 lock = false; setTimeout(() => { lock = true; }, 500); } // 右按钮的实现 oRight.addEventListener("click", handleRightBtn); // 左按钮的实现 瞬间切换到假图然后拉到真实最后一张图片 oLeft.addEventListener("click", () => { if (!lock) return; index--; if (index === -1) { oImgList.style.left = 5 * -imgWidth + "px"; oImgList.style.transition = "none"; index = 4; setTimeout(() => { oImgList.style.left = index * -imgWidth + "px"; oImgList.style.transition = "0.5s ease"; }, 0); } else { oImgList.style.left = index * -imgWidth + "px"; } // 设置小圆点的高亮 setCircles(); lock = false; setTimeout(() => { lock = true; }, 300); }); // 获取五个小圆点 const circles = document.querySelectorAll(".circle"); // 小圆点高亮的显示 function setCircles() { for (let i = 0; i < circles.length; i++) { if (i === index) { circles[i].classList.add("active"); } else { circles[i].classList.remove("active"); } } } // 小圆点点击切换图片 使用事件代理 const oCircle = document.querySelector(".circle-list"); oCircle.addEventListener("click", (e) => { // 当我点击小圆点的时候 if (e.target.nodeName.toLowerCase() === "li") { // 当前元素的data-n对应得值 和index一一对应 const n = Number(e.target.getAttribute("data-n")); index = n; setCircles(); oImgList.style.transition = "0.5s ease"; oImgList.style.left = index * -imgWidth + "px"; } }); // 自动轮播 let autoplay = setInterval(handleRightBtn, 2000); const oWrap = document.getElementById("wrap"); // 移入停止轮播 oWrap.addEventListener("mouseenter", () => { clearInterval(autoplay); }); // 移出继续轮播 oWrap.addEventListener("mouseleave", () => { // 设表先关 clearInterval(autoplay); autoplay = setInterval(handleRightBtn, 2000); }); </script> ``` ## 展现效果 本实例效果如下图所示：  (此轮播图为哔哩哔哩网站轮播图,大家可自行对其参数进行修改) 根据实例效果，需要自行准备的轮播图图片、轮播图下方圆点图、左右箭头按钮等。 完整演示案例下载： <div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div> > 蒋志鹏同学供稿 最后修改：2022 年 01 月 04 日 © 允许规范转载 赞 2 都滑到这里了，不点赞再走！？
