淡入淡出轮播图 实现功能：
1、鼠标离开自动轮播，鼠标滑入停止自动轮播
2、点击圆圈或箭头，更换轮播图片
实现思路：
1、搭建框架：通过html、css搭建框架渲染样式，通过把第一张设置透明度为1，其他图片透明度为0的方法实现淡入淡出，透明度可以加一个过渡让转换更流畅；
2、展示图片：设置显示轮播图片默认第一张；设置切换图片事件，先移除当前图片再添加一个具有active效果的轮播图片；
3、点击切换：设置圆圈以及左右箭头点击切换下一张事件，注意：切换到最左侧需要把索引改为最后一张，切换到最右侧则把索引改为第一张；
4、自动轮播：设置定时器，鼠标滑入停止自动轮播、离开继续自动轮播事件。
代码如下：
js：
let box = document.querySelector('.box') let imgs = document.querySelectorAll('.img-box li') let circles = document.querySelectorAll('.circle-box li') let leftBtn = document.querySelector('.left-btn') let rightBtn = document.querySelector('.right-btn')// 显示图片的索引 let imgIndex = 0
// 切换展示到指定图片 function play(index){ // 遍历每一项，然后移除class类名为active的元素节点 imgs.forEach(item=>{ item.classList.remove('active') }) // 添加带有active效果的元素节点 imgs[index].classList.add('active')
// 点亮圆圈（同上） circles.forEach(item=>{ item.classList.remove('active') }) circles[index].classList.add('active') }
// 点击左侧切换上一张 leftBtn.onclick = function(){ // 根据索引切换(索引是0时变为最后一张，其他递减) imgIndex = imgIndex == 0 ? imgs.length-1 : --imgIndex // 执行切换 play(imgIndex) }
// 点击右侧切换下一张 rightBtn.onclick = function(){ // 索引（判断最后一张则下一个展示第一张，否则递增） imgIndex = imgIndex == imgs.length-1 ? 0 : ++imgIndex // 执行切换 play(imgIndex) }
// 点击圆圈切换相应图片（圆圈图片都是数组所以要遍历） circles.forEach((item,index)=>{ item.onclick = function(){ // 更改索引 imgIndex = index // 执行切换 play(imgIndex) } })
// 自动轮播 // 鼠标离开盒子轮播继续 // 设置定时器 let timer = null // 整个文档加载后触发鼠标离开自动轮播继续事件 window.oncload = box.onmouseout = function(){ timer = setInterval(function(){ // 调用右键按钮事件 rightBtn.click() },2000) }
// 鼠标悬停在盒子上轮播停止 box.onmouseover = function(){ // 清除定时器 clearInterval(timer) }
html：
<div class="box"> <!-- 图片 --> <ul class="img-box"> <li class="active"> <img src="./image/a.jpg" alt=""> </li> <li> <img src="./image/b.jpg" alt=""> </li> <li> <img src="./image/c.jpg" alt=""> </li> <li> <img src="./image/d.jpg" alt=""> </li> <li> <img src="./image/e.jpg" alt=""> </li> </ul> <!-- 圆圈 --> <ul class="circle-box"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> <!-- 左右按钮 --> <span class="left-btn"><</span> <span class="right-btn">></span> </div> css： *{ margin: 0; padding: 0; } ul{ list-style: none; } .box{ position: relative; width: 800px; height: 300px; margin: 100px auto; } .img-box li{ position: absolute; top: 0; left: 0; width: 800px; height: 300px; /* 设透明度为0 */ opacity: 0; transition: opacity 2s; } /* 第一张显示 */ .img-box li.active{ opacity: 1; } .img-box img{ width: 100%; height: 100%; } /* 圆圈 */ .circle-box{ position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); } .circle-box li{ float: left; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: rgb(195, 191, 191); border: 2px solid black; cursor: pointer; } .circle-box li.active, .circle-box li:hover{ background: #fff; } /* 左右按钮 */ .box span{ position: absolute; top: 50%; transform: translateY(-50%); font-size: 35px; color: rgba(255,255,255,.3); cursor: pointer; } .box span:hover{ color: rgba(255,255,255,.8); background: rgba(0,0,0,.5); } .left-btn{ left: 0; padding: 10px 7px 10px 3px; } .right-btn{ right: 0; padding: 10px 3px 10px 7px; } 实现效果：
标签：box,轮播,淡入淡出,imgIndex,切换,active,li,js From： https://www.cnblogs.com/gmyd/p/16770495.html