解读在代码注释里面，如果看不懂或者不理解，可以评论区留言或私信我
网页布局部分：
<div class="focus">
<ul>
<li><img src="./images/myq1.jpg" alt=""></li>
<li><img src="./images/myq1.jpg" alt=""></li>
<li><img src="./images/myq1.jpg" alt=""></li>
<li><img src="./images/myq1.jpg" alt=""></li>
<li><img src="./images/myq1.jpg" alt=""></li>
</ul>
<!-- 圆点 -->
<ol>
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>
CSS布局部分：
.focus {
position: relative;
padding-top: 44px;
overflow: hidden;
}
.focus img{
width: 100%;
}
.focus ul {
overflow: hidden;
width: 500%;
margin-left: -100%;
}
.focus ul li {
float: left;
width: 20%;
}
.focus ol {
position: absolute;
bottom: 5px;
right: 5px;
}
.focus ol li {
display: inline-block;
width: 5px;
height: 5px;
background-color: #fff;
list-style: none;
border-radius: 2px;
transition: all .3s;
}
.focus ol li.current {
width: 15px;
}
JS部分：
//等待网页加载完以后再开始处理轮播图
window.addEventListener('load', function () {
var focus = document.querySelector('.focus');
var ul = focus.children[0];
var w = focus.offsetWidth;
var ol = focus.children[1];
var index = 0;
//添加定时器
var timer = setInterval(function () {
index++;
var translatex = -index * w;
//C3缓动动画效果
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX(' + translatex + 'px)';
}, 2000);
//无缝衔接应该等到过渡完成之后， 再去判断 监听过度完成事件 transitionend
ul.addEventListener('transitionend', function () {
if (index >= ul.children.length - 2) {
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)';
}
//小圆点跟随变化效果
//1.把ol里面带有current 类名的选出来 去掉
ol.querySelector('li.current').classList.remove('current');
//2.让当前索引号的li加上current
ol.children[index].classList.add('current');
})
//手指滑动轮播图
//触摸元素 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 (e) {
//如果用户手指移动了再做计算，否则就不做了
if (flag) {
//(1) 如果移动距离大于50像素就播放上一张或下一张
if (Math.abs(moveX) > 50) {
//如果是右滑就播放上一张 moveX 是正值
if (moveX > 0) {
index--;
//如果是左滑就播放下一张 moveX 是负值
} else {
index++;
}
var translatex = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX(' + translatex + 'px)';
//如果小于50像素就回弹
} else {
var translatex = -index * w;
ul.style.transition = 'all .1s';
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)';
}, 2000);
})
})
生命不息，学习不止，键盘敲烂，月薪过万！加油，代码人！
