以下为页面实现效果
以下为html代码
<div id="banner" class="banner">
<ul>
<li style="background-color: pink"></li>
<li style="background-color: aqua"></li>
<li style="background-color: yellow"></li>
<li style="background-color: chartreuse"></li>
</ul>
<input id="PageUp" type="button" value="上一页">
<input id="PageDown" type="button" value="下一页">
</div>
一下为js代码
//设置一个轮播插件
class bannerBar{
//设置传入id和左右按钮的id
constructor(id,inputLeft,inputRight){
this.oDiv=document.getElementById(id);
this.oUl=this.oDiv.getElementsByTagName("ul")[0];
this.oLi=this.oUl.getElementsByTagName("li");
this.inputLeft=document.getElementById(inputLeft);
this.inputRight=document.getElementById(inputRight);
//执行方法
this.render();
}
//设置轮播方法
render(){
//给左按钮添加鼠标监听事件
this.inputLeft.addEventListener("click",()=>{
//给ul添加向右移动400px的动画事件,并设置时间为0.5s
this.oUl.style.transform="translateX(400px)";
this.oUl.style.transition="0.5s";
//将左右按钮禁用
this.inputLeft.disabled=true;
this.inputRight.disabled=true;
//设置一个一次性计时器,在0.5s之后执行内部函数
setTimeout(()=> {
//选取到ul最后一个li,删除并存储到list里
this.list=this.oUl.removeChild(this.oLi[this.oLi.length-1]);
//将list打印到ul的第一个li前
this.oUl.insertBefore(this.list,this.oUl.childNodes[0]);
//将ul移动到初始位置,并设置动画为0s,使其瞬间完成
this.oUl.style.transition="0s";
this.oUl.style.transform="translateX(0px)";
//将左右按钮启用
this.inputLeft.disabled=false;
this.inputRight.disabled=false;
},500);
});
//给右按钮添加鼠标监听事件
this.inputRight.addEventListener("click",()=> {
//给ul添加向左移动400px的动画事件,并设置时间为0.5s
this.oUl.style.transform="translateX(-400px)";
this.oUl.style.transition="0.5s";
//将左右按钮禁用
this.inputLeft.disabled=true;
this.inputRight.disabled=true;
//设置一个一次性计时器,在0.5s之后执行内部函数
setTimeout(()=> {
//选取到ul最前面的li,删除并存储到list里
this.list=this.oUl.removeChild(this.oLi[0]);
//将list打印到ul的最后li的后面
this.oUl.appendChild(this.list);
//将ul移动到初始位置,并设置动画为0s,使其瞬间完成
this.oUl.style.transition="0s";
this.oUl.style.transform="translateX(0px)";
//将左右按钮启用
this.inputLeft.disabled=false;
this.inputRight.disabled=false;
},500);
})
}
}
//调用类bannerBar,并闯入参数
new bannerBar("banner","PageUp","PageDown");