导航栏上下滚动效果

以下为HTML代码

<div 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>

以下为CSS代码

*{
    margin: 0;
    padding: 0;
}
.banner{
    position: relative;
    width: 400px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
}
.banner ul{
    position:absolute;
    top: -300px;
    left: 0px;
    height: 300px;
    list-style: none;
}
.banner li{
    width: 400px;
    height: 300px;
    /*float: left;*/
}
.banner input{
    position: absolute;
    width: 80px;
    height: 30px;
    border: none;
    border-radius: 4px;
    background-color: darkturquoise;
    color: white;
    outline-style: none;
}
#PageUp{
    bottom: 30px;
    left: 40px;
}
#PageDown{
    bottom: 30px;
    right: 40px;
}

以下为JS代码

window.οnlοad=function () {
    //获取元素
    let bannerImgBar=document.getElementsByClassName("banner")[0].getElementsByTagName("ul")[0];
    let bannerImg=bannerImgBar.getElementsByTagName("li");
    let PageUP=document.getElementById("PageUp");
    let PageDown=document.getElementById("PageDown");
    //设置上一页按钮
    PageUP.addEventListener("click",function () {
        //位移同时给予动画时间效果，并禁用按键
        bannerImgBar.style.transform="translateY(300px)";
        bannerImgBar.style.transition="0.5s";
        PageUP.disabled=true;
        PageDown.disabled=true;
        setTimeout(function () {
            //在0.5S后删除最后的子元素，然后加在最前面，同时关闭动画时间实现瞬间位移，打开按钮
            let list=bannerImgBar.removeChild(bannerImg[bannerImg.length-1]);
            bannerImgBar.insertBefore(list,bannerImgBar.childNodes[0]);
            bannerImgBar.style.transition="0s";
            bannerImgBar.style.transform="translateX(0px)";
            PageUP.disabled=false;
            PageDown.disabled=false;
        },500);
    });
    PageDown.addEventListener("click",function () {
        //位移同时给予动画时间效果，并禁用按键
        bannerImgBar.style.transform="translateY(-300px)";
        bannerImgBar.style.transition="0.5s";
        PageUP.disabled=true;
        PageDown.disabled=true;
        setTimeout(function () {
            //在0.5S后删除最前面子元素，然后加在最后面，同时关闭动画时间实现瞬间位移，打开按钮
            let list=bannerImgBar.removeChild(bannerImg[0]);
            bannerImgBar.appendChild(list);
            bannerImgBar.style.transition="0s";
            bannerImgBar.style.transform="translateX(0px)";
            PageUP.disabled=false;
            PageDown.disabled=false;
        },500);
    })
}