这里使用匀速动画方法实现轮播效果
js部分
实现无缝轮播效果
1、在图片盒子最前面放入最后一张图片，在图片盒子最后面放入第一张图片，这样显示的图片下标第一张为1最后一张0；
2、当点击第一张时，显示的是最后一张，也就是图片index的下标改变
3、点击最后一张的效果与点击第一张的差不多，唯独改变了下标
看上去第一张点击时就平滑向前移动到最后一张，实际上在一瞬间回到第一张，这样就实现了无缝轮播的效果
<style> ul, ol { margin: 0; padding: 0; list-style: none; } #box { position: relative; margin: 100px auto; 510px; height: 210px; border: 1px solid; } .screen { position: relative; 500px; height: 200px; margin: 5px; overflow: hidden; } /* 图片盒子 */ .screen ul { position: absolute; left: -500px; top: 0; 3500px; } .screen ul li { float: left; } /* 图片下标盒子 */ .screen ol { position: absolute; bottom: 10px; right: 10px; height: 30px; } .screen ol li { float: left; 20px; height: 20px; margin-left: 10px; background-color: #fff; text-align: center; color: #000; cursor: pointer; } .screen ol .current { background-color: aqua; color: #fff; } .left, .right { display: none; position: absolute; top: 70px; 30px; height: 60px; line-height: 60px; text-align: center; background-color: #000; font-family: "simsun", "宋体"; font-weight: 700; font-size: 30px; color: #fff; opacity: .3; cursor: pointer; } .left { left: 5px; } .right { right: 5px; } #box:hover .left, #box:hover .right { display: block; } .left:hover, .right:hover { opacity: .5; } img { 500px; height: 200px; overflow: hidden; } </style> </head> <body> <div id="box"> <div class="screen"> <ul> <li><img src="./img/timg (5).jpg" alt=""></li> <li><img src="./img/timg (1).jpg" alt=""></li> <li><img src="./img/timg(2).jpg" alt=""></li> <li><img src="./img/timg (3).jpg" alt=""></li> <li><img src="./img/timg (4).jpg" alt=""></li> <li><img src="./img/timg (5).jpg" alt=""></li> <li><img src="./img/timg (1).jpg" alt=""></li> </ul> <ol> <li data-index="0" class="current">1</li> <li data-index="1">2</li> <li data-index="2">3</li> <li data-index="3">4</li> <li data-index="4">5</li> </ol> </div> <div class="left"><</div> <div class="right">></div> </div> <script src="animation.js"></script> <script> // 获取元素 var box = document.getElementById("box"); // 外层大盒子 var screen = document.getElementsByClassName("screen")[0]; var ul = screen.children[0]; // 图片盒子 var ol = screen.children[1]; // 图片下标盒子 var left = document.getElementsByClassName("left")[0]; var right = document.getElementsByClassName("right")[0]; var timeID = null; // 定时器id var index = 1; // 显示的第一张图片下标变量 // 注册事件 function goPre() { // 判断是第一张 回到最后一张 if (index == 0) { ul.style.left = -(ul.children.length - 2) * screen.offsetWidth + "px"; index = ul.children.length - 2; } // 索引-- index--; // 图片动画 Animation(ul, -index * screen.offsetWidth); // 显示下标 showIndex(); } function goNext() { // 判断是最后一张 回到第一张 if (index == ul.children.length - 1) { ul.style.left = "-500px"; index = 1; } // 索引++ index++; // 图片运动动画 Animation(ul, -index * screen.offsetWidth); // 显示下标 showIndex(); } // 鼠标点击下一页 right.onclick = function() { goNext() }; // 鼠标点击上一页 left.onclick = function() { goPre() }; // 显示下标方法 function showIndex() { // 设置页码背景颜色 (第一张下标为1) for (let i = 0; i < ol.children.length; i++) { if ((index - 1) == i) { ol.children[i].className = "current"; } else { ol.children[i].className = ""; } } // 第0张和最后一张特殊设置 if (index == 0) { // 显示最后一张 ol.children[ol.children.length - 1].className = "current"; } else if (index == ul.children.length - 1) { // 显示第一张 ol.children[0].className = "current"; } } // 点击下标显示对应图片 for (let i = 0; i < ol.children.length; i++) { ol.children[i].onclick = function() { Animation(ul, -(i + 1) * screen.offsetWidth); index = (i + 1); showIndex(); } } // 定时轮播方法 function startLB() { timeID = setInterval(function() { goNext(); }, 2000); } function stopLB() { clearInterval(timeID); } // 开始轮播 startLB(); // 鼠标移入停止轮播 box.onmouseenter = function() { stopLB(); } // 鼠标移除继续轮播 box.onmouseleave = function() { startLB(); }
效果图
最后一张向第一张平滑