js对象轮播插件

以下为页面实现效果

以下为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");