js制作轮播图左右过度切换点击圆点切换自动切换

本文主要是介绍js制作轮播图左右过度切换点击圆点切换自动切换，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

轮播图左右过度切换点击圆点切换自动切换

效果图，以及源码

有什么不足的地方欢迎吐槽和建议

使用方法

将准备好的图片替换到源码上的图片标签地址即可

其他修改根据代码注释修改即可

<!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">&#xe62c;</i></a><a href="javaScript:;" class="button-right"><i class="right-sign iconfont">&#xe62b;</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>

这篇关于js制作轮播图左右过度切换点击圆点切换自动切换的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！