轮播图左右过度切换点击圆点切换自动切换
效果图，以及源码
有什么不足的地方欢迎吐槽和建议
使用方法
将准备好的图片替换到源码上的图片标签地址即可
其他修改根据代码注释修改即可
<!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></head><style>* {margin: 0;padding: 0;}a {text-decoration: none;}.main{margin: 10% 20%;padding: 0;};.main::after,.main::before {display: table;content: '';}.main::after {height: 0;line-height: 0;visibility: hidden;clear: both;}.main .main-Carousel {margin-top: 10px;float: left;width: 564px;border-radius: 0 18px 0 0;}.main .main-Carousel .site-Carousel-box {position: relative;left: 0;width: 564px;height: 315px;border-radius: 12px;background-color: #fff;overflow: hidden;}.main .main-Carousel .Carousel-box {position: relative;left: 0;width: 564px;height: 315px;border-radius: 12px;background-color: #fff;overflow: hidden;}.main-Carousel .Carousel-box .Carousel-site {position: absolute;left: 0;width: 3948px;height: 315px;}.main-Carousel .Carousel-box .Carousel-site .Carousel-image {width: 564px;height: 315px;float: left;overflow: hidden;}.main-Carousel .Carousel-box .Carousel-site .Carousel-image .link {display: inline-block;width: 564px;height: 315px;cursor: pointer;}.main-Carousel .Carousel-box .Carousel-site .Carousel-image .link img {width: 564px;height: 315px;border-radius: 12px;}.main .main-Carousel .site-Carousel-box .switch-button-box {min-height: 0;}.main .main-Carousel .site-Carousel-box .switch-button-box .switch-opt a {position: absolute;top: 50%;background-color: rgba(0, 0, 0, .2);}.switch-opt a,.switch-opt i {display: block;width: 20px;height: 30px;font-size: 14px;line-height: 30px;color: #fff;overflow: hidden;}.main .main-Carousel .site-Carousel-box .switch-button-box .switch-opt .button-left {left: 0;}.button-left .left-sign {margin-right: 6px;}.main .main-Carousel .site-Carousel-box .switch-button-box .switch-opt .button-left {border-top-right-radius: 15px;border-bottom-right-radius: 15px;-moz-border-top-right-radius: 15px;-moz-border-bottom-right-radius: 15px;-webkit-border-top-right-radius: 15px;-webkit-border-bottom-right-radius: 15px;}.main .main-Carousel .site-Carousel-box .switch-button-box .switch-opt .button-right {right: 0;}.button-right .right-sign {margin-left: 5px;}.main .main-Carousel .site-Carousel-box .switch-button-box .switch-opt .button-right {border-top-left-radius: 15px;border-bottom-left-radius: 15px;-moz-border-top-left-radius: 15px;-moz-border-bottom-left-radius: 15px;-webkit-border-top-left-radius: 15px;-webkit-border-bottom-left-radius: 15px;}.main .site-Carousel-box .switch-button-box .switch-dot {position: absolute;bottom: 15px;left: 50%;padding: 0 1px 0 1px;margin-left: -40px;background-color: rgba(255, 255, 255, .2);border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;overflow: hidden;}.switch-button-box .switch-dot {text-align: center;font-size: 0;}.main .site-Carousel-box .switch-button-box .switch-dot li {display: inline-block;margin: 3px;}.main .site-Carousel-box .switch-button-box .switch-dot li a {display: block;float: left;width: 8px;height: 0;padding-top: 8px;border-radius: 4px;background-color: #fff;}.main .site-Carousel-box .switch-button-box .switch-dot .dot a {background-color: #ff5000;}</style><script>/* 加载完成后运行 */window.onload = function(){/* 加载完成运行程序 */Carousel();};function Carousel() {var a = document.querySelector('.Carousel-box');/* 获取宽高 564 * 315，容器 */var b = document.querySelector('.Carousel-site');/* 获取容纳图片的盒子 */var w = a.offsetWidth;/* 获取宽度 */var c = document.querySelector('.switch-dot');/* 获取圆点的父级 */var l = document.querySelector('.button-left');/* 左按钮 */var r = document.querySelector('.button-right');/* 右按钮 */b.insertBefore(b.children[4].cloneNode(true),b.children[0]);/* 克隆图片节点4放到图片节点0的前面 */b.appendChild(b.children[1].cloneNode(true));/* 克隆图片节点0放到末尾 */var index = 1;/* 图片初始化 */var idot = 0;/* 点初始化 */var timer;/* 控制自动播放的开始和停止 */var btn = true;/* 控制点击左右按钮速度的开关（防止用户暴力点击或过快点击 */var goLeft = function(){/* 左切换模块 */if(index == 1 || idot == 0){/* 判断图片和点到达指定位置时执行以下代码 */index = 6;/* 图片节点到达1的时候无缝跳转到图片节点6 */idot = 4;/* 红点到达圆点节点0时跳转到圆点节点4 */var t = -index * w;/* index的值切换一次是564刚好是一张图片的宽度 */b.style.transitionDuration = '0s';/* 将过度设置为0s，相当于没有效果 */b.style.transform = 'translate3d(' + t + 'px' + ',' + 0 + 'px' + ',' + 0 + 'px)';/* 通过改变X轴来实现切换效果 */dot();/* 圆点切换效果 */setTimeout(function(){/* 每隔0毫秒后执行以下代码 */index = 5;/* 图片节点跳转到图片节点5 */chart();/* 图片切换过度效果 */},0);}else{index--;/* 图片往左切换时（index--；）往右边如代码（goRight）模块即可 */idot--;chart();dot();};};var goRight = function(){/* 意思与（goLeft）模块相同修改判断的值和跳转值即可 */if(index == 5 || idot == 4){index = 0;idot = 0;var t = -index * w;b.style.transitionDuration = '0s';b.style.transform = 'translate3d(' + t + 'px' + ',' + 0 + 'px' + ',' + 0 + 'px)';dot();setTimeout(function(){index = 1;chart();},0);}else{index++;idot++;chart();dot();};};var firing = function(){/* firing用于启动timer */timer = setInterval(function() {goRight(); /* 想左切换时换成（goLeft） */}, 3000);/* 每隔3秒切换一次（注意setInterval是以毫秒计算所以3000就是3秒 */};firing();/* onload ，页面加载完成时执行firing里面的所有代码 */a.onmouseover = function(){/* 鼠标悬停在css样式名为Carousel-box的html标签时停止timer */clearInterval(timer);};a.onmouseout = function(){/* 鼠标离开时重启（firing）里面的所有代码 */firing();};l.onmouseover = function(){clearInterval(timer);};l.onmouseout = function(){firing();};r.onmouseover = function(){clearInterval(timer);};r.onmouseout = function(){firing();};l.onclick = function(){if(btn){btn = false;goLeft();setTimeout(function(){btn = true;},600);};};r.onclick = function(){if(btn){btn = false;/* 鼠标点击一次后关闭点击效果 */goRight();setTimeout(function(){/* 600毫秒后重新启动点击效果 */btn = true;},600);};};d.onclick = function(e){if(e.target.tagName == 'A'){var i = e.target.dataset.index;index = i;idot = i -1;chart();dot();};};function chart(){/* 图片过度切换效果模块 */var t = -index * w;b.style.transitionDuration = '0.2s';/* 过度时间为0.2s */b.style.transform = 'translate3d(' + t + 'px' + ',' + 0 + 'px' + ',' + 0 + 'px)';};function dot(){/* 圆点切换模块 */c.querySelector('.dot').classList.remove('dot');/* 删除圆点中css样式中有dot的标签 */c.children[idot].classList.add('dot');/* 根据idot的值给对应标签没有dot的标签添加dot实现白点变红点的效果 */};};</script><body><div class="main"><div class="main-Carousel"><div class="site-Carousel-box"><div class="Carousel-box"><div class="Carousel-site"style="left: 0;transform: translate3d(-564px, 0px , 0px); transition-duration: 0.2s;"><!-- 这样操作时为了隐藏克隆的过来的节点 --><div class="Carousel-image" data-image="1"><a href="" class="link"><img src="./image/O1CN011Azqv328QcReHT5kF_!!6000000007927-0-octopus.jpg" alt=""></a></div><div class="Carousel-image" data-image="2"><a href="" class="link"><img src="./image/O1CN018Ms4l41vbzGuL3JOk_!!6000000006192-0-octopus.jpg" alt=""></a></div><div class="Carousel-image" data-image="3"><a href="" class="link"><img src="./image/O1CN01a71ilU1T2RCTvUXDY_!!6000000002324-0-tps-846-472.jpg" alt=""></a></div><div class="Carousel-image" data-image="4"><a href="" class="link"><img src="./image/O1CN01RbnhFd1wBFigMUNYq_!!6000000006269-2-tps-846-472.png" alt=""></a></div><div class="Carousel-image" data-image="5"><a href="" class="link"><img src="./image/O1CN01Sf6dER1zbJ3uVQ0lE_!!6000000006732-0-tps-846-472.jpg" alt=""></a></div></div></div><div class="switch-button-box"><div class="switch-opt"><a href="javaScript:;" class="button-left"><i class="left-sign iconfont"></i></a><a href="javaScript:;" class="button-right"><i class="right-sign iconfont"></i></a></div><ul class="switch-dot"><li class="dot"><a href="javaScript:void(0);" data-index="1"></a></li><li class=""><a href="javaScript:void(0);" data-index="2"></a></li><li class=""><a href="javaScript:void(0);" data-index="3"></a></li><li class=""><a href="javaScript:void(0);" data-index="4"></a></li><li class=""><a href="javaScript:void(0);" data-index="5"></a></li></ul></div></div></div></div></body></html>
