JavaScript 轮播图（移动端）
Posted 乱舞春秋__
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 轮播图（移动端）相关的知识，希望对你有一定的参考价值。
实现移动端轮播图主要用到了setInterval（），transitionend事件和touchstart事件，touchmove事件，touchend事件。
核心思想：
（1）ul进行绝对定位，利用CSS中的transform属性实现轮播
（2）为ul添加过渡效果
（3）在第一张图片前面添加最后一张图片，防止在第一张图片左滑时出现空白。
（4）在最后一张图片后面添加第一张图片，当图片滚动到最后添加的图片时，移除过渡类，快速切回第一张图片。
值得一提的是，设定了一个变量flag，用于避免手指只是点击屏幕时，初始状态为false,触摸屏幕并移动后flag被设为true。
主要功能如下：
1.自动循环播放
2.点击左右按钮，可切换至相对应的图片
3.点击小圆圈可切换至对应的图片，并且小圈随着图片的切换变色
完整代码：
html与CSS：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
.banner {
position: relative;
height: 129px;
overflow: hidden;
}
ul {
width: 500%;
height: 100%;
margin-left: -100%;
}
ul li {
width: 20%;
height: 100%;
float: left;
}
img {
width: 100%;
height: 100%;
}
ol {
position: absolute;
right: 15px;
bottom: 0;
}
ol li {
display: inline-block;
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
}
ol li.current {
background-color: rgba(22, 218, 80, 0.712);
}
</style>
<script src="mloop.js"></script>
</head>
<body>
<div class="banner">
<ul>
<li><img src="images/loop3.webp"></li>
<li><img src="images/loop1.webp"></li>
<li><img src="images/loop2.webp"></li>
<li><img src="images/loop3.webp"></li>
<li><img src="images/loop1.webp"></li>
</ul>
<ol>
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>JS代码：
window.addEventListener('load', function () {
var banner = this.document.querySelector('.banner');
var ul = banner.querySelector('ul');
var index = 0;
var bannerWidth = banner.offsetWidth;
var ol = banner.querySelector('ol');
var flag = false;
var timer = setInterval(function () {
index++;
ul.style.transition = 'transform .3s';
var translatex = -index * bannerWidth;
ul.style.transform = 'translateX(' + translatex + 'px)';
}, 2000);
ul.addEventListener('transitionend', function () {
if (index >= 3) {
index = 0;
ul.style.transition = 'none';
var translatex = -index * bannerWidth;
ul.style.transform = 'translateX(' + translatex + 'px)';
} else if (index < 0) {
index = 2;
ul.style.transition = 'none';
var translatex = -index * bannerWidth;
ul.style.transform = 'translateX(' + translatex + 'px)';
}
ol.querySelector('li.current').classList.remove('current');
ol.children[index].classList.add('current');
});
var startX;
var moveX;
ul.addEventListener('touchstart', function (e) {
clearInterval(timer);
x = ul.offsetLeft;
startX = e.targetTouches[0].pageX;
});
ul.addEventListener('touchmove', function (e) {
moveX = e.targetTouches[0].pageX - startX;
var translatex = -index * bannerWidth + moveX;
ul.style.transition = 'none';
ul.style.transform = 'translateX(' + translatex + 'px)';
flag = true;
});
ul.addEventListener('touchend', function (e) {
if (flag) {
if (Math.abs(moveX) > 50) {
if (moveX > 0) {
index--;
} else {
index++;
}
var translatex = -index * bannerWidth;
ul.style.transition = 'transform .3s';
ul.style.transform = 'translateX(' + translatex + 'px)';
} else {
var translatex = -index * bannerWidth;
ul.style.transition = 'all .1s';
ul.style.transform = 'translateX(' + translatex + 'px)';
};
}
clearInterval(timer);
timer = setInterval(function () {
index++;
ul.style.transition = 'transform .3s';
var translatex = -index * bannerWidth;
ul.style.transform = 'translateX(' + translatex + 'px)';
}, 2000);
});
});效果图：
以上是关于JavaScript 轮播图（移动端）的主要内容，如果未能解决你的问题，请参考以下文章