概要
这个案例具备常见轮播图完整的功能，大家可以根据自己的需求去修改； 代码可以直接复制运行，需要安装sass
主要功能：
（1）鼠标移入轮播图，左右两边的按钮出现，离开则隐藏按钮；(CSS完成）
（2）点击左侧按钮，图片向右播放一张，右侧按钮同理；
（3）图片播放的同时，下面的小圆圈也会随之变化；
（4）点击小圆圈，播放相应的图片；
（5）鼠标移入小圆圈，播放相应的图片（看需求是要点击还是移入，把click改成mouseenter）
（6）鼠标移出轮播图自动播放图片
（7）鼠标移入轮播图暂停播放图片
页面效果：
大家觉得有帮助的话可以点个赞支持下，谢谢啦~
完整代码：
一、Css样式，使用sass预编译器
<style >/* 默认样式 */* {margin: 0;padding: 0;a {text-decoration: none;}li {list-style: none;}}/* 轮播图盒子 */.box {width: 600px;height: 350px;margin: 70px auto;position: relative;overflow: hidden;/* 上、下一页 */.prev,.next {opacity: 0;display: inline-block;cursor: pointer;width: 50px;height: 50px;position: absolute;top: 50%;color: #d2d0d0;z-index: 33;text-align: center;font-size: 40px;transform: translateY(-25px);}/* 上一页不同的属性 */.prev {left: 0;border-radius: 0 25% 25% 0;}/* 下一页不同的属性 */.next {right: 0;border-radius: 25% 0 0 25%;}/* 图片容器 */.images {position: absolute;top: 0;left: 0;width: 1000%;/* 图片 */li {list-style: none;float: left;img {width: 600px;height: 350px;}}}/* 小圆点盒子 */.dots {position: absolute;bottom: 10px;left: 50%;height: 13px;transform: translateX(-50%);background: rgba(255, 255, 255, .3);border-radius: 7px;display: flex;/* 小圆点 */li {width: 10px;height: 10px;border-radius: 50%;border-color: white;background-color: rgb(0, 0, 0, 0.2);margin: 2px 5px;cursor: pointer;}/* 选择的小圆点 */.active {background-color: rgb(247, 243, 243);}}}/* 鼠标移入盒子显示上、下按钮 */.box:hover .prev,.box:hover .next {opacity: 1;}/* 鼠标移入上、下按钮，背景模糊 */.box .prev:hover,.box .next:hover {background-color: rgba(0, 0, 0, 0.2);}
</style>二、Html结构
<body><div class="box"><!-- 左箭头 --><a href="javascript:;" class="prev"> <</a><!-- 右箭头 --><a href="javascript:;" class="next"> ></a><ul class="images"><li><a href="#"><img src="./src/assets/00.jpg" alt="轮播图图片"></a></li><li><a href="#"><img src="./src/assets/11.jpg" alt="轮播图图片"></a></li><li><a href="#"><img src="./src/assets/12.jpg" alt="轮播图图片"></a></li><li><a href="#"><img src="./src/assets/13.jpg" alt="轮播图图片"></a></li><li><a href="#"><img src="./src/assets/15.jpg" alt="轮播图图片"></a></li><li><a href="#"><img src="./src/assets/16.jpg" alt="轮播图图片"></a></li></ul><ul class="dots"><!-- li 用js动态生成--></ul></div>
</body>三、JavaScript
<script>/* 功能需求（1）当鼠标经过轮播图，左右两边的按钮出现，离开则隐藏按钮；(CSS完成）（2）点击左侧按钮，图片向右播放一张，右侧同理；（3）图片播放的同时，下面的小圆圈也会随之变化；（4）点击小圆圈，可以播放相应的图片；（5）鼠标移入小圆圈，可以播放相应的图片（看需求是要点击还是移入，把click改成mouseenter）（6）鼠标移出轮播图会自动播放图片（7）鼠标移入轮播图会暂停播放图片*/window.addEventListener('load', function () {// 图片的下标var slideIndex = 0;//circle 控制小圆圈的播放var circle = 0;//获取小圆圈盒子var dots = document.querySelector('.dots');//获取所有图片var images = document.querySelector('.images');//获取轮播图容器var box = document.querySelector('.box')//获取轮播图容器宽度var box_width = box.offsetWidth;//1.获取上、下一页并添加点击事件var prev = document.querySelector(".prev")var next = document.querySelector(".next")//上一页prev.addEventListener("click", function () {if (slideIndex == 0) {//已经第一页了，再上一页就该是最后一页slideIndex = images.children.length - 1images.style.left = -slideIndex * box_width + 'px';}slideIndex--;animate(images, -slideIndex * box_width)// 小圆圈跟随一起变化circle--;circle = circle < 0 ? dots.children.length - 1 : circle;//调用函数circleChange();});//下一页next.addEventListener("click", function () {if (slideIndex == images.children.length - 1) {//已经最后一页了，再下一页就该是第一页images.style.left = 0;slideIndex = 0;}slideIndex++;animate(images, -slideIndex * box_width);// 小圆圈跟随一起变化circle++;if (circle == dots.children.length) {circle = 0;}circleChange();});// 2.动态生成小圆圈 有几张图片，就生成几个小圆圈var dots = document.querySelector('.dots');for (var i = 0; i < images.children.length; i++) {//创建一个小livar li = document.createElement('li');//记录当前小圆圈的索引号 通过创建自定义属性来做li.setAttribute('index', i);dots.appendChild(li);//小圆圈的排他思想 在生成小圆圈的同时绑定点击事件li.addEventListener('click', function () {for (var i = 0; i < dots.children.length; i++) {dots.children[i].className = ' '; //清空样式}this.className = 'active';//点击小圆圈，移动图片，本质移动的是ul//ul 的移动距离 就是小圆圈的索引号 * 图片的宽度 注意是负值// 当我们点击了某个小li 就拿到它的index属性var index = this.getAttribute('index');//当我们点击了某个小li 就要把这个小li 的index给slideIndexslideIndex = index;circle = index;animate(images, -slideIndex * box_width);})}//把dots 里面的第一个小li设置类名为 activedots.children[0].className = 'active';// 实现滑动到最后一张照片时 可以平滑地过渡到第一张，克隆第一张图片 放在ul最后面，在其后克隆小圆点不会多var first = images.children[0].cloneNode(true);images.appendChild(first);//3.点击小圆圈添加激活样式function circleChange() {for (var i = 0; i < dots.children.length; i++) {dots.children[i].className = '';}dots.children[circle].className = 'active';}//定时器自动播放3Svar timer = setInterval(function () {next.click();}, 3000);//3.绑定鼠标移入移出事件//鼠标移入，停止播放,清除计时器box.addEventListener('mouseenter', function () {clearInterval(timer);timer = null;//清除计时器});//鼠标离开，轮播图自动切换 相当于点击右箭头box.addEventListener('mouseleave', function () {timer = setInterval(function () {// 手动调用事件next.click();}, 3000);});//轮播图播放动画function animate(obj, target, callback) {//让元素只有一个定时器在执行，需要清除以前的定时器clearInterval(obj.timer);obj.timer = setInterval(function () {var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {//停止动画 本质是停止定时器clearInterval(obj.timer)//回调函数写到定时器结束位置if (callback) {callback();}}//把每次加1这个步长值改为一个慢慢变小的值obj.style.left = obj.offsetLeft + step + 'px';}, 15);}next.click();})
</script>
