如何用原生JS实现轮播效果

最新推荐文章于 2024-06-17 15:29:34 发布

猿林新秀

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量91

点赞数

分类专栏： JavaScript 文章标签： animation html css3

本文链接：https://blog.csdn.net/weixin_46021847/article/details/108105967

版权

JavaScript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #myDiv {
            width: 500px;
            height: 400px;
            border: 1px red solid;
            position: relative;
            overflow: hidden;
        }

        #myDiv > img {
            width: 100%;
            height: 100%;
            position: absolute;
            margin-left: 100%;
        }
        #myDiv > img:nth-of-type(1){
            margin-left: 0;
        }

        @keyframes carouselGo {
            from {
                margin-left: 0;
            }
            to {
                margin-left: -100%;
            }
        }

        @keyframes carouselCome {
            from {
                margin-left: 100%;
            }
            to {
                margin-left: 0;
            }
        }
    </style>
</head>
<div id="myDiv">
    <img src="./images/1.jpg" alt="">
    <img src="./images/2.jpg" alt="">
    <img src="./images/3.jpg" alt="">
</div>
<body>
<script>
    let box = document.getElementById("myDiv").children;
    let i=0;
    function carousel() {
        if (i===2){
            box[2].style.animation="carouselGo 3s";
            box[0].style.animation="carouselCome 3s";
            i=0;
        }else{
            box[i].style.animation="carouselGo 3s";
            box[i+1].style.animation="carouselCome 3s";
            i++;
        }
    }
    setInterval(carousel,3000)

</script>
</body>
</html>