JS练习_轮播图，实现滚动效果

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作轮播图</title>
    <style>
        .swiper{
            width: 640px;
            height: 320px;
            overflow: hidden;
            position: relative;
        }
        .images-container{
            width: 1920px;
            height: 320px;
            display: flex;
            transition: transform 0.3s;
        }
        .images-container img{
            width: 640px;
            height: 320px;
        }
        /*.images-container:hover{*/
        /*    transform: translate(-640px);*/
        /*}*/
        .number-list{
            position: absolute;
            bottom: 0;
        }

    </style>
</head>
<body>
<div class="swiper">
    <div class="images-container">
        <img src="images/桌面壁纸1.jpg" alt="">
        <img src="images/桌面壁纸2.jpg" alt="">
        <img src="images/桌面壁纸3.jpg" alt="">
    </div>
    <div class="number-list">
        <button>1</button>
        <button>2</button>
        <button>3</button>
    </div>

</div>

<script>
    let btnlist = document.querySelectorAll(".number-list button");

    let container = document.querySelector(".images-container");
    for (let i in btnlist) {
        btnlist[i].onclick = function (){
            container.style.transform = `translate(${-640 * i}px)`;
        }
    }
</script>

</body>
</html>
posted @ 2021-09-20 18:36  博客zhu虎康  阅读(106)  评论(0)  编辑  收藏  举报