位置: IT常识 - 正文
JS实战——轮播图(js轮播图实现思路)
编辑：rootadminJS实战——轮播图
一、轮播图介绍
本文链接地址:https://www.jiuchutong.com/zhishi/299004.html
转载请保留说明！
目录
一、轮播图介绍
二、原理
三、轮播图基本htm布局
四、轮播图CSS布局
五、轮播图JS布局
六、轮播图效果
一、轮播图介绍
推荐整理分享JS实战——轮播图(js轮播图实现思路)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js轮播图菜鸟教程,js中轮播图应该怎么写,js怎么实现轮播,js轮播图视频教程,js简单轮播,js轮播图视频教程,js轮播图实现简单代码,js实现轮播图效果,内容如对您有帮助，希望把文章链接给更多的朋友！
现在我们在很多网站上都能看到轮播图，像某东、某宝、某猫等等大小型网站上都有应用。下面就是某宝上的轮播图样式。
二、原理将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。
三、轮播图基本htm布局主要就是创建一个大盒子里面存放轮播图的图片标签，cicle标签下的div主要是为后期存放实现图片轮播下面的小圆点。
<div class="banner"><ul class="imgList"><li><img src="../1.png" alt=""></li><li><img src="../2.jpg" alt=""></li><li><img src="../3.jpg" alt=""></li><li><img src="../4.jpg" alt=""></li></ul><div class="circle"> </div></div>四、轮播图CSS布局定义全局，消除页面对我们创建CSS布局时的影响。布局全局样式，消除li标签自带小黑点使用定位消除高度塌陷。
* {margin: 0px;padding: 0px;}.banner {width: 600px;margin: auto;border: 10px solid greenyellow;height: 350px;position: relative;overflow: hidden;}.imgList {list-style: none;/* width: 2480px; */position: absolute;/* left:-620px; */}设置图片大小，让图片在我们之前设置的边框里。
.imgList img {width: 600px;height: 350px;}.imgList li {float: left;margin-right: 20px;}定义a标签，生成点击小圆点，产生点击前后效果对比样式。
.circle {position: absolute;bottom: 15px;left: 50%;transform: translateX(-50%);} .circle a {width: 15px;height: 15px;background: yellow;display: block;border-radius: 50%;opacity: .5;float: left;margin-right: 5px;cursor: pointer;}.circle a.hover {background: black;opacity: .8;}五、轮播图JS布局首先先获取元素，给父类设置整个图片的宽度，并利用设置好的CSS样式创建底部小圆点。
window.onload = function () {var imgList = document.querySelector('.imgList');var circle = document.querySelector('.circle');var thisIndex = 0;var imgListLi = imgList.children;var circleA = circle.children;var flag = true;imgList.style.width = imgList.children.length * 620 + 'px';for (var i = 0; i < imgList.children.length; i++) {var aNode = document.createElement('a');aNode.setAttribute('index', i);//设置自定义属性if (i == 0) {aNode.className = 'hover';}circle.appendChild(aNode);}设置监听器为点击按钮实现图片的移动，并用获取元素的方法解决点击圆点附近区域跳转的bug事件。
circle.addEventListener('click', function (e) {if (flag) {flag = false;// console.log(e.target);if (e.target.nodeName != 'A') {return false;}thisIndex = e.target.getAttribute('index');// imgList.style.left = -thisIndex * 620 + 'px';slow(imgList, -thisIndex * 620, function () {flag = true;});circleChange();}})利用函数和节流阀解决图片在跳转到最后一张图片无法返回第一张图片的问题，节流阀用来解决图片移动出现左右抖动横跳现象，并设置了图片自动播放功能。
function antoChange() {setInterval(function () {if (flag) {flag = false;if (thisIndex >= circleA.length) {thisIndex = 0;}slow(imgList, -thisIndex * 620, function () {flag = true;});circleChange();thisIndex++;}}, 3000);}剩下主要用来解决图片左右移动速度和图片移动同时图片下方小圆点同步移动，以及移动过程中小圆点样式的变化。
function circleChange() {for (var i = 0; i < circleA.length; i++) {circleA[i].className = '';}circleA[thisIndex].className = 'hover';}function slow(obj, target, callback) {obj.myInter = setInterval(function () {var offsetLeft = obj.offsetLeft;var num = (target - offsetLeft) / 10;num > 0 ? num = Math.ceil(num) : num = Math.floor(num);if (offsetLeft == target) {clearInterval(obj.myInter);callback && callback();} else {obj.style.left = offsetLeft + num + 'px';}}, 10)}antoChange();}六、轮播图效果七、完整代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>轮播图</title><!-- <link rel="stylesheet" href="style.css"> --><style>* {margin: 0px;padding: 0px;}.banner {width: 600px;margin: auto;border: 10px solid greenyellow;height: 350px;position: relative;overflow: hidden;}.imgList {list-style: none;/* width: 2480px; */position: absolute;/* left:-620px; */}.imgList img {width: 600px;height: 350px;}.imgList li {float: left;margin-right: 20px;}.circle {position: absolute;bottom: 15px;left: 50%;transform: translateX(-50%);}.circle a {width: 15px;height: 15px;background: yellow;display: block;border-radius: 50%;opacity: .5;float: left;margin-right: 5px;cursor: pointer;}.circle a.hover {background: black;opacity: .8;}</style></head><body><div class="banner"><ul class="imgList"><li><img src="../1.png" alt=""></li><li><img src="../2.jpg" alt=""></li><li><img src="../3.jpg" alt=""></li><li><img src="../4.jpg" alt=""></li></ul><div class="circle"><!-- <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> --></div></div><script>window.onload = function () {var imgList = document.querySelector('.imgList');var circle = document.querySelector('.circle');var thisIndex = 0;var imgListLi = imgList.children;var circleA = circle.children;var flag = true;imgList.style.width = imgList.children.length * 620 + 'px';for (var i = 0; i < imgList.children.length; i++) {var aNode = document.createElement('a');aNode.setAttribute('index', i);//设置自定义属性if (i == 0) {aNode.className = 'hover';}circle.appendChild(aNode);}circle.addEventListener('click', function (e) {if (flag) {flag = false;// console.log(e.target);if (e.target.nodeName != 'A') {return false;}thisIndex = e.target.getAttribute('index');// imgList.style.left = -thisIndex * 620 + 'px';slow(imgList, -thisIndex * 620, function () {flag = true;});circleChange();}})function antoChange() {setInterval(function () {if (flag) {flag = false;if (thisIndex >= circleA.length) {thisIndex = 0;}slow(imgList, -thisIndex * 620, function () {flag = true;});circleChange();thisIndex++;}}, 3000);}function circleChange() {for (var i = 0; i < circleA.length; i++) {circleA[i].className = '';}circleA[thisIndex].className = 'hover';}function slow(obj, target, callback) {obj.myInter = setInterval(function () {var offsetLeft = obj.offsetLeft;var num = (target - offsetLeft) / 10;num > 0 ? num = Math.ceil(num) : num = Math.floor(num);if (offsetLeft == target) {clearInterval(obj.myInter);callback && callback();} else {obj.style.left = offsetLeft + num + 'px';}}, 10)}antoChange();}</script></body></html>下一篇：聊聊关于图像分割的损失函数 - BCEWithLogitsLoss(图像可以分成哪些类别?)
