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");