JS无缝轮播图(支持点击左右切换 小圆点切换 定时器自动播放)

HTML代码

<div class="box"><!-- ul就相当于我装图片的盒子 --><ul class="box_ul"><li class="box_li"><img src="images/messi3.jpg" alt=""></li><li class="box_li"><img src="images/messi1.jpg" alt=""></li><li class="box_li"><img src="images/messi2.jpg" alt=""></li><li class="box_li"><img src="images/messi3.jpg" alt=""></li><li class="box_li"><img src="images/messi1.jpg" alt=""></li></ul><!-- 左右两边按钮 --><div class="left"><a href="#"><span>< </span></a></div><div class="right"><a href="#"><span>> </span></a></div><!-- 小圆点 --><ul class="yuandian"><li class="point current"></li><li class="point"></li><li class="point"></li></ul></div>

CSS代码

<style>* {margin: 0;padding: 0;}a {text-decoration: none;}li {list-style: none;}.box {position: relative;width: 800px;height: 400px;margin: 0 auto;overflow: hidden;}.box_ul {position: absolute;top: 0px;left: -800px;width: 4000px;height: 400px;transform: translateX(0px);}.box_ul img {width: 800px;height: 400px;}.box_ul .box_li {float: left;}/* 左边箭头的样式 */.box .left {width: 60px;height: 100px;background-color: grey;position: absolute;top: 50%;margin-top: -50px;left: 1px;text-align: center;line-height: 100px;}.box .right {width: 60px;height: 100px;background-color: grey;position: absolute;top: 50%;margin-top: -50px;left: 741px;text-align: center;line-height: 100px;}.box a {display: inline-block;width: 60px;height: 100px;}/* 小圆点样式 */.yuandian {width: 60px;height: 16px;position: absolute;top: 375px;left: 50%;margin-left: -30px;}.yuandian li {width: 10px;height: 10px;border-radius: 50%;border-style: solid;border-width: 2px;border-color: slategray;float: left;margin-right: 5px;}.current {background-color: white;}</style>

JS代码

<script>//获取元素var yuandian = document.querySelector('.yuandian')//装小圆点的盒子var point = document.querySelectorAll('.point');//小圆点var boxLi = document.querySelectorAll('.box_li');//图片var boxUl = document.querySelector('.box_ul');//装图片的盒子var right = document.querySelector('.right');//右边按钮var left = document.querySelector('.left');//左边按钮var num = 0;//num记录我点击按钮的次数var circle = 0;//circle来记录小圆点的位置//让所有的小圆点都添加上点击事件for (var i = 0; i < point.length; i++) {//自定义属性point[i].setAttribute('index', i);//给小圆点添加上点击事件point[i].onclick = function () {//使用排它思想//第一步：干掉所有人for (var i = 0; i < point.length; i++) {point[i].className = 'point';}this.className = 'point current';var index = this.getAttribute('index');//将小圆点的自定义属性值传给numnum = index;//将小圆点的自定义属性传给circlecircle = index;//算法:自定义属性的值 * -盒子的宽度//'translateX(index*-800px)';boxUl.style.transform = 'translateX(' + index * -800 + 'px)';}}//右边按钮点击事件right.onclick = function () {//为什么要num++,因为num 进来的时候是0，如果是0第一次点击按钮的时候，位置不会动，所以需要++num++;boxUl.style.transition = 'transform 0.5s linear 0s';boxUl.style.transform = 'translateX(' + num * -800 + 'px)';//需要使用到无缝滚动技术(轮播图)if (num == boxLi.length - 2) {num = 0;setTimeout(() => {boxUl.style.transform = 'translateX(' + num * -800 + 'px)';boxUl.style.transition = 'none';}, 500);//时间需要跟过渡的时间匹配}//小圆点跟随我点击右边按钮的位置进行变化circle++;if (circle == boxLi.length - 2) {circle = 0;}//小圆点跟随排他思想for (var i = 0; i < point.length; i++) {point[i].className = 'point';}point[circle].className = 'point current';}//左边按钮点击事件left.onclick = function () {boxUl.style.transition = 'transform 0.5s linear 0s';if (num == 0) {num++;boxUl.style.transform = 'translateX(' + num * 800 + 'px)';setTimeout(() => {//为什么要-3，因为多加了一张图,length变成5num = boxLi.length - 3;boxUl.style.transition = 'none';boxUl.style.transform = 'translateX(' + -num * 800 + 'px)';}, 500);//时间需要跟过渡的时间匹配} else {num--;boxUl.style.transform = 'translateX(' + -num * 800 + 'px)';}//小圆点跟随我点击左边按钮的位置进行变化if (circle == 0) {circle = boxLi.length - 2;}circle--;//小圆点跟随排他思想for (var i = 0; i < point.length; i++) {point[i].className = 'point';}point[circle].className = 'point current';}//自动播放轮播图//鼠标移入事件boxUl.onmouseover = function () {//暂停定时器clearInterval(timer);timer = null;}right.onmouseover = function () {//暂停定时器clearInterval(timer);timer = null;}left.onmouseover = function () {//暂停定时器clearInterval(timer);timer = null;}yuandian.onmouseover = function () {//暂停定时器clearInterval(timer);timer = null;}//鼠标移出事件boxUl.onmouseout = function () {//开始定时器timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次}right.onmouseout = function () {//开始定时器timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次}left.onmouseout = function () {//开始定时器timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次}yuandian.onmouseout = function () {//开始定时器timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次}//使用定时器自动播放(setInterval())var timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次</script>

最后源码附上

<!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>JS+CSS+HTML实现轮播图案例</title><style>* {margin: 0;padding: 0;}a {text-decoration: none;}li {list-style: none;}.box {position: relative;width: 800px;height: 400px;margin: 0 auto;overflow: hidden;}.box_ul {position: absolute;top: 0px;left: -800px;width: 4000px;height: 400px;transform: translateX(0px);}.box_ul img {width: 800px;height: 400px;}.box_ul .box_li {float: left;}/* 左边箭头的样式 */.box .left {width: 60px;height: 100px;background-color: grey;position: absolute;top: 50%;margin-top: -50px;left: 1px;text-align: center;line-height: 100px;}.box .right {width: 60px;height: 100px;background-color: grey;position: absolute;top: 50%;margin-top: -50px;left: 741px;text-align: center;line-height: 100px;}.box a {display: inline-block;width: 60px;height: 100px;}/* 小圆点样式 */.yuandian {width: 60px;height: 16px;position: absolute;top: 375px;left: 50%;margin-left: -30px;}.yuandian li {width: 10px;height: 10px;border-radius: 50%;border-style: solid;border-width: 2px;border-color: slategray;float: left;margin-right: 5px;}.current {background-color: white;}</style></head><body><div class="box"><!-- ul就相当于我装图片的盒子 --><ul class="box_ul"><li class="box_li"><img src="images/messi3.jpg" alt=""></li><li class="box_li"><img src="images/messi1.jpg" alt=""></li><li class="box_li"><img src="images/messi2.jpg" alt=""></li><li class="box_li"><img src="images/messi3.jpg" alt=""></li><li class="box_li"><img src="images/messi1.jpg" alt=""></li></ul><!-- 左右两边按钮 --><div class="left"><a href="#"><span>< </span></a></div><div class="right"><a href="#"><span>> </span></a></div><!-- 小圆点 --><ul class="yuandian"><li class="point current"></li><li class="point"></li><li class="point"></li></ul></div></body></html><script>//获取元素var yuandian = document.querySelector('.yuandian')//装小圆点的盒子var point = document.querySelectorAll('.point');//小圆点var boxLi = document.querySelectorAll('.box_li');//图片var boxUl = document.querySelector('.box_ul');//装图片的盒子var right = document.querySelector('.right');//右边按钮var left = document.querySelector('.left');//左边按钮var num = 0;//num记录我点击按钮的次数var circle = 0;//circle来记录小圆点的位置//让所有的小圆点都添加上点击事件for (var i = 0; i < point.length; i++) {//自定义属性point[i].setAttribute('index', i);//给小圆点添加上点击事件point[i].onclick = function () {//使用排它思想//第一步：干掉所有人for (var i = 0; i < point.length; i++) {point[i].className = 'point';}this.className = 'point current';var index = this.getAttribute('index');//将小圆点的自定义属性值传给numnum = index;//将小圆点的自定义属性传给circlecircle = index;//算法:自定义属性的值 * -盒子的宽度//'translateX(index*-800px)';boxUl.style.transform = 'translateX(' + index * -800 + 'px)';}}//右边按钮点击事件right.onclick = function () {//为什么要num++,因为num 进来的时候是0，如果是0第一次点击按钮的时候，位置不会动，所以需要++num++;boxUl.style.transition = 'transform 0.5s linear 0s';boxUl.style.transform = 'translateX(' + num * -800 + 'px)';//需要使用到无缝滚动技术(轮播图)if (num == boxLi.length - 2) {num = 0;setTimeout(() => {boxUl.style.transform = 'translateX(' + num * -800 + 'px)';boxUl.style.transition = 'none';}, 500);//时间需要跟过渡的时间匹配}//小圆点跟随我点击右边按钮的位置进行变化circle++;if (circle == boxLi.length - 2) {circle = 0;}//小圆点跟随排他思想for (var i = 0; i < point.length; i++) {point[i].className = 'point';}point[circle].className = 'point current';}//左边按钮点击事件left.onclick = function () {boxUl.style.transition = 'transform 0.5s linear 0s';if (num == 0) {num++;boxUl.style.transform = 'translateX(' + num * 800 + 'px)';setTimeout(() => {//为什么要-3，因为多加了一张图,length变成5num = boxLi.length - 3;boxUl.style.transition = 'none';boxUl.style.transform = 'translateX(' + -num * 800 + 'px)';}, 500);//时间需要跟过渡的时间匹配} else {num--;boxUl.style.transform = 'translateX(' + -num * 800 + 'px)';}//小圆点跟随我点击左边按钮的位置进行变化if (circle == 0) {circle = boxLi.length - 2;}circle--;//小圆点跟随排他思想for (var i = 0; i < point.length; i++) {point[i].className = 'point';}point[circle].className = 'point current';}//自动播放轮播图//鼠标移入事件boxUl.onmouseover = function () {//暂停定时器clearInterval(timer);timer = null;}right.onmouseover = function () {//暂停定时器clearInterval(timer);timer = null;}left.onmouseover = function () {//暂停定时器clearInterval(timer);timer = null;}yuandian.onmouseover = function () {//暂停定时器clearInterval(timer);timer = null;}//鼠标移出事件boxUl.onmouseout = function () {//开始定时器timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次}right.onmouseout = function () {//开始定时器timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次}left.onmouseout = function () {//开始定时器timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次}yuandian.onmouseout = function () {//开始定时器timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次}//使用定时器自动播放(setInterval())var timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次</script>

图片可以用背景颜色替代