移动轮播1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .banner{
            position: relative;
            width: 400px;
            height: 300px;
            margin: 0 auto;
            overflow: hidden;
        }
        .banner ul{
            position:absolute;
            top: 0;
            left: -400px;
            width: 2000px;
            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;
        }
    </style>
</head>
<body>
<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>
<script>
    window.onload=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="translateX(400px)";
            bannerImgBar.style.transition="0.5s";
            PageUP.disabled=true;
            PageDown.disabled=true;
            setTimeout(function () {
                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="translateX(-400px)";
            bannerImgBar.style.transition="0.5s";
            PageUP.disabled=true;
            PageDown.disabled=true;
            setTimeout(function () {
                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);
        })
    }
</script>
</body>
</html>
猜你喜欢
