<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 400px;
height: 200px;
overflow: hidden;
white-space: nowrap;
position: relative;
}
.item{
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
position: absolute;
background: #fff;
transform: translateX(100%);
background: grey;
color:#fff;
}
</style>
</head>
<body>
<div>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h3>方向</h3>
<div>
<button id="right">right</button>
<button id="left">left</button>
</div>
</div>
<script>
/*
* 思路
* 1.active的那个出现在视口translateX(0)，before挪到translateX(-100%),next挪到translateX(100%)。
* 2.向左则给active和next提供过渡效果，其余不用。
* 3.向右则给active和before提供过渡效果，其余不用。
**/
class Slide{
constructor(options){
this.rightBtn = options.rightBtn && document.querySelector(options.rightBtn);
this.leftBtn = options.leftBtn && document.querySelector(options.leftBtn);
this.items = document.querySelectorAll('.item');
this.len = this.items.length;
this.interval = null;
this.duration = options.duration || 3000;
this.moveTo(options.firstSlide|| 2);
if(options.autoplay){
this.autoMove();
}
this.bind();
}
bind(){
this.rightBtn && this.rightBtn.addEventListener('click',()=>{
this.active = this.getLeft(this.active);
this.move('right');
})
this.leftBtn && this.leftBtn.addEventListener('click',()=>{
this.active = this.getRight(this.active);
this.move('left');
})
}
autoMove(){
this.interval = setInterval(()=>{
// new
this.active = this.getRight(this.active);
this.move('left');
},this.duration)
}
moveTo(ind){
this.active = ind;
this.move('none');//初始化位置
}
//d[direction]:'left'|'right'|'none';
move(d){
this.right = this.getRight(this.active);
this.left = this.getLeft(this.active);
this.items[this.active - 1].style.cssText = `transform:translateX(0);${d==='none'?'':'transition:all .5s;'}`;
this.items[this.right - 1].style.cssText = `transform:translateX(100%);${d==='right'?'transition:all .5s;':''}`
this.items[this.left - 1].style.cssText = `transform:translateX(-100%);${d==='left'?'transition:all .5s;':''}`
}
getLeft(ind){
if(ind > 1){
ind --;
}else{
ind = this.len;
}
return ind
}
getRight(ind){
if(ind < this.len){
ind ++;
}else{
ind = 1;
}
return ind
}
}
const slide = new Slide({
duration:2000,//default 3000
firstSlide:1,//default 2
autoplay:true,//default true
rightBtn:'#right',
leftBtn:'#left',
});
</script>
</body>
</html>
