备注：为了使大家更好的理解移动端，响应pc端的代码被删了，并且未做更多的简化以及合理的代码分配，还望谅解
//复制代码并运行即可显示效果
css样式：
*{
padding: 0;margin: 0;
}
.wrap{
width:100%;
min-width:320px;
max-width:980px;
height:200px;
position:relative;
overflow:hidden;
margin:50px auto;
}
.wrap ul,.wrap ol {
list-style:none;
}
.wrap ul{
width:700%;
height:100%;
}
.wrap ul li{
width:20%;
height:100%;
float:left;
}
.wrap ol{
width:100%;
height:20px;
position:absolute;
top:160px;
display:flex;
justify-content: center;
}
.wrap ol li{
width: 12px;
height: 12px;
border-radius:50%;
background-color:white;
float:left;
margin:0 4px;
}
.wrap ol li.active{
background-color: black;
}
布局：
<div class="wrap">
<ul>
<li style="background:rgb(68, 0, 255);"></li>
<li style="background:red;"></li>
<li style="background:yellow;"></li>
<li style="background:rgb(43, 235, 107);"></li>
<li style="background:rgb(12, 138, 60);"></li>
<li style="background:rgb(68, 0, 255);"></li>
<li style="background:red;"></li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
js代码：
let wrap = document.querySelector('.wrap');
let wrapul = wrap.querySelector('ul');
let ulchildren = wrapul.children;
let wrapol = wrap.querySelector('ol');
let list = wrapol.querySelectorAll('li');
console.log(wrap,wrapul,ulchildren,wrapol,list)
class Sport{
constructor(wrap,wrapul,ulchildren,wrawpol,list){
this.wrap = wrap;//最大父级
this.wrapul = wrapul;//滚动父级
this.ulchildren = ulchildren;//滚动父级内的li
this.lengths = this.ulchildren.length;//滚动父级内的li的长度
this.wrapol = wrapol;//小圆点的父级
this.list = list;//所有小圆点
this.length = this.list.length;//所有小圆点的长度
this.currentIndex = 1;//初始化下标
this.timer = null;//定时器
this.wrapWidth = this.wrap.clientWidth;//最大父级的宽
this.init();
this.listIndex = 0;//初始化小圆点的下标
this.touchX= 0;//触摸开始位置
this.moveX = 0;//触摸结束位置
this.deltaX = 0;//触摸开始位置 - 触摸结束位置
}
//初始化函数
init() {
this.Size();
this.sport();
this.touch();
this.Resize();
}
//设置width和height
Size() {
for(let i = 0;i < this.ulchildren.length;i ++){
this.ulchildren[i].style.width = this.wrapWidth+'px'
}
this.wrapul.style.width = this.wrapWidth * this.ulchildren.length + 'px'
this.wrapul.style.transform = `translate(${-this.wrapWidth}px)`
}
Resize() {
//在这里可以检测pc端时窗口width和height,从而重置所有的样式以此来响应pc端
window.addEventListener('resize',() => {
})
}
sport() {
//定时器
this.timer = setInterval(()=>{
this.list[this.listIndex].classList.remove('active')
this.currentIndex ++
this.listIndex ++
if(this.listIndex >= 5){
this.listIndex = 0
}
this.list[this.listIndex].classList.add('active')
this.wrapul.style.webkitTransition = 'transform 0.5s ease-in-out';
this.wrapul.style.transform = `translate(${-this.wrapWidth*this.currentIndex}px)`
if(this.currentIndex >= 6){
this.currentIndex = 1
setTimeout(()=>{
this.wrapul.style.webkitTransition = 'none';
this.wrapul.style.transform = `translate(${-this.wrapWidth}px)`
},500)
}
},1000)
}
touch() {
//触摸开始事件
this.wrapul.addEventListener('touchstart',(ev)=>{
clearInterval(this.timer)
this.touchX = ev.touches[0].clientX
wrapul.style.webkitTransition = 'none'
})
//触摸移动事件
this.wrap.addEventListener('touchmove',(ev)=> {
this.moveX = ev.touches[0].clientX;
this.deltaX = this.moveX - this.touchX;
this.wrapul.style.webkitTransform =
`translateX(${-this.wrapWidth * this.currentIndex + this.deltaX}px)`
})
//触摸结束事件
this.wrap.addEventListener('touchend',(ev)=> {
clearInterval(this.timer)
this.sport();
//如果触摸开始到移动结束，所移动的距离大于盒子wrap的一半,则wrapul移动一个wrap的距离，否则回到当前位置
if(Math.abs(this.deltaX) >= this.wrapWidth/2){
this.list[this.listIndex].classList.remove('active')
if(this.deltaX <0){
this.listIndex ++
this.currentIndex ++
if(this.listIndex >= 5){
this.listIndex = 0
setTimeout(()=>{
this.wrapul.style.webkitTransition = 'none';
this.wrapul.style.transform = `translate(${-this.wrapWidth}px)`
this.currentIndex = 1
},500)
}
this.list[this.listIndex].classList.add('active')
}else{
this.listIndex --
this.currentIndex --
if(this.listIndex < 0){
this.listIndex = 4
setTimeout(()=>{
this.wrapul.style.webkitTransition = 'none';
this.wrapul.style.transform = `translate(${-this.wrapWidth*5}px)`;
this.currentIndex = 5
console.log(this.currentIndex)
},500)
}
this.list[this.listIndex].classList.add('active')
}
this.wrapul.style.webkitTransition = 'transform .4s ease-in-out'
this.wrapul.style.webkitTransform = `translateX(${-this.currentIndex * this.wrapWidth}px)`
}
else{
this.currentIndex = this.currentIndex;
this.listIndex = this.listIndex;
this.wrapul.style.webkitTransition = 'transform .4s ease-in-out'
this.wrapul.style.webkitTransform = `translateX(${-this.currentIndex * this.wrapWidth}px)`
}
})
}
}
new Sport(wrap,wrapul,ulchildren,wrapol,list);