轮播图（无缝轮播图）

article/2025/9/23 12:40:17

1.无缝轮播核心: 在最后多加一张第一张图, 当达到最后一张t1的时候一瞬间将ul拉回到0的位置

结构：

<div class="wrap"><ul><li><img src="./image/t1.png" alt=""></li><li><img src="./image/t2.png" alt=""></li><li><img src="./image/t3.png" alt=""></li><li><img src="./image/t4.png" alt=""></li>//在最后添加第一张图片<li><img src="./image/t1.png" alt=""></li></ul><p><span class="active"></span><span></span><span></span><span></span></p><button>&lt;</button><button>&gt;</button>
</div>

2.每隔5s 切换到下一张图，实现轮播切换的效果当前改变的是ul的位置改变的就是left，小圆点需要变成当前选中的

js部分：

<!-- 1.6 引入公用js --><script src="./dzz.js"></script><script>// 1.1 获取元素 ulvar ul = document.getElementsByTagName('ul')[0];// 1.5 获取到一张图片的宽度var div = document.getElementsByTagName('div')[0];var dw = parseInt(getStyle(div, 'width'));console.log(dw);// 1.8.1 获取小圆点var spans = document.getElementsByTagName('span');console.log(spans);// 1.9.1 获取livar lis = ul.getElementsByTagName('li');console.log(lis);// 1.3 当前不知道是第几张 假设var n = 0;var t = setInterval(auto, 3000);// 2. 当鼠标划上div 清除定时器div.onmouseenter = function () {clearInterval(t);};// 3. 当鼠标划下div 重新开启定时器div.onmouseleave = function () {t = setInterval(auto, 3000);}// 4. 点击右箭头 切换到下一张// 4.1 获取元素 btnvar btns = document.getElementsByTagName('button');console.log(btns);// 4.2 添加点击事件btns[1].onclick = function () {// 调用autoauto();};// 5. 点击左箭头 切换到上一张btns[0].onclick = function () {// 3 -- 2 -- 1n -= 2;auto();};// 6. 点击每一个小圆点 切换到对应的图片// 6.1 每一个for(var i = 0; i < spans.length; i++){// 6.3.2 存储自定义索引spans[i].index = i;// 6.2 点击spans[i].onclick = function () {// 6.3 切换到对应的图 分析小圆点和图片关系  一一对应 下标相同// 6.3.1 获取到小圆点的下标 console.log(this.index);// 6.4 改变n的值n = this.index - 1;auto();};}// 轮播函数function auto() {// console.log('点击了一下');// 1.4 切换到下一张 n 0 -- 1 -- 2 -- 3n++;// 1,9 如果到了最后一张 回到第一张 n == 4if (n == lis.length) {n = 0;ul.style.left = n * -dw + 'px';// 1.10 更新nn = 1;}// 5.2 增加为0的判断if(n == -1){n = lis.length - 1; // 4ul.style.left = n * -dw + 'px';n = lis.length - 2;}// 1.7 改变ul的left = n * 负的一张图片的宽度// 当前元素.style.属性名 没有动画效果 变成调用 move// ul.style.left = n * -dw + 'px';move(ul, 'left', 30, n * -dw);// 1.8 改变小圆点 小园点和图片的关系是一一对应 下标一样for (var i = 0; i < spans.length; i++) {spans[i].className = '';}spans[n == spans.length ? 0 : n].className = 'active';}
</script>