代码实现：
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="">
</li>
<li>
<img src="https://s1.ax1x.com/2020/10/22/Bi1mb4.jpg" alt="">
</li>
<li>
<img src="https://s1.ax1x.com/2020/10/22/Bi1erF.md.jpg" alt="">
</li>
<li>
<img src="https://s1.ax1x.com/2020/10/22/Bi1ZKU.jpg" alt="">
</li>
<li>
<img src="https://s1.ax1x.com/2020/10/22/Bi1mb4.jpg" alt="">
</li>
</ul>
<!-- 小圆点 -->
<ol>
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
mobileAutoPlay.css：
body {
max- 540px;
min- 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;
500%;
margin-left: -100%;
}
.focus ul li {
float: left;
20%;
}
.focus img {
100%;
}
.focus ol {
position: absolute;
bottom: 5px;
right: 5px;
margin: 0;
}
.focus ol li {
display: inline-block;
8px;
height: 8px;
background-color: #fff;
list-style: none;
border-radius: 4px;
transition: all .3s;
margin-left: 1px;
}
.focus ol .current {
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);
});
});