- A+
所属分类：Web前端
代码实现：
mobileAutoPlay.html（复制并保存为html文件，打开并切换为移动端显示，即可见效果）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/jacklzx/normalize.css"> <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/jacklzx/mobileAutoPlay.css"> <script src="https://blog-static.cnblogs.com/files/jacklzx/mobileAutoPlay.js"></script> </head> <body> <!-- 焦点图 --> <div class="focus"> <ul> <li> <img src="https://s1.ax1x.com/2020/10/22/Bi1ZKU.jpg" alt="JavaScript 移动端轮播图" alt=""> </li> <li> <img src="https://s1.ax1x.com/2020/10/22/Bi1mb4.jpg" alt="JavaScript 移动端轮播图" alt=""> </li> <li> <img src="https://s1.ax1x.com/2020/10/22/Bi1erF.md.jpg" alt="JavaScript 移动端轮播图" alt=""> </li> <li> <img src="https://s1.ax1x.com/2020/10/22/Bi1ZKU.jpg" alt="JavaScript 移动端轮播图" alt=""> </li> <li> <img src="https://s1.ax1x.com/2020/10/22/Bi1mb4.jpg" alt="JavaScript 移动端轮播图" alt=""> </li> </ul> <!-- 小圆点 --> <ol> <li class="current"></li> <li></li> <li></li> </ol> </div> </body> </html> mobileAutoPlay.css：
body { max-width: 540px; min-width: 320px; margin: 0 auto; font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei; color: #000; background: #f2f2f2; overflow-x: hidden; -webkit-tap-highlight-color: transparent; } div { box-sizing: border-box; } ul { list-style: none; margin: 0; padding: 0; } a { text-decoration: none; color: #222; } .focus { overflow: hidden; position: relative; margin-top: 44px; } .focus ul { overflow: hidden; width: 500%; margin-left: -100%; } .focus ul li { float: left; width: 20%; } .focus img { width: 100%; } .focus ol { position: absolute; bottom: 5px; right: 5px; margin: 0; } .focus ol li { display: inline-block; width: 8px; height: 8px; background-color: #fff; list-style: none; border-radius: 4px; transition: all .3s; margin-left: 1px; } .focus ol .current { width: 15px; } mobileAutoPlay.js：
window.addEventListener('load', function() { // 1. 获取元素 var focus = document.querySelector('.focus'); var ul = focus.children[0]; // 获取focus的宽度 var w = focus.offsetWidth; var ol = focus.children[1]; // 2. 定时器轮播图片 var index = 0; var timer = setInterval(function() { index++; var translatex = -index * w; ul.style.transition = 'all .3s'; ul.style.transform = 'translateX(' + translatex + 'px)'; }, 1000); // 等过渡完成后再判断 ul.addEventListener('transitionend', function() { // 无缝滚动 if (index >= 3) { index = 0; // 去掉过渡效果 这样让我们的ul 快速的跳到目标位置 ul.style.transition = 'none'; // 利用最新的索引号乘以宽度 去滚动图片 var translatex = -index * w; ul.style.transform = 'translateX(' + translatex + 'px)'; } else if (index < 0) { index = 2; ul.style.transition = 'none'; var translatex = -index * w; ul.style.transform = 'translateX(' + translatex + 'px)'; } // 3.小圆点跟随变化 // ol中的li带有current类型的选出来，删除类名 ol.querySelector('.current').classList.remove('current'); // 当前索引号加上current类名 ol.children[index].classList.add('current'); }); // 4. 手指滑动轮播图 // 触摸元素touchstart：获取手指初始坐标 var startX = 0; var moveX = 0; var flag = false; ul.addEventListener('touchstart', function(e) { startX = e.targetTouches[0].pageX; // 手指触摸的时候，停止定时器 clearInterval(timer); }); // 移动手指 touchmove：计算手指滑动的距离，并且移动盒子 ul.addEventListener('touchmove', function(e) { // 计算移动距离 moveX = e.targetTouches[0].pageX - startX; // 移动盒子：盒子原来的距离+手指移动的距离 var translatex = -index * w + moveX; ul.style.transition = 'none'; ul.style.transform = 'translateX(' + translatex + 'px)'; flag = true; e.preventDefault(); // 阻止滚动屏幕的默认行为 }); // 手指离开，根据滑动的距离判断是否到下一张 ul.addEventListener('touchend', function() { // 移动大于50像素，滑动 if (flag) { if (Math.abs(moveX) > 100) { // 右滑 if (moveX > 0) { index--; // 左滑 } else if (moveX < 0) { index++; } var translatex = -index * w; ul.style.transition = 'all .3s'; ul.style.transform = 'translateX(' + translatex + 'px)'; } else { // 移动小于50像素，回弹 var translatex = -index * w; ul.style.transition = 'all .3s'; ul.style.transform = 'translateX(' + translatex + 'px)'; } } // 重新开启定时器，开启之前先清除定时器，保证当前只有一个定时器 clearInterval(timer); timer = setInterval(function() { index++; var translatex = -index * w; ul.style.transition = 'all .3s'; ul.style.transform = 'translateX(' + translatex + 'px)'; }, 1000); }); }); 
