简易的轮播图

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body {
                background: linear-gradient(to right, #ffaaff, #ffaa7f, #ffaaff, #ffaa7f), linear-gradient(to bottom, #ffaaff, #ffaa7f, #ffaaff, #ffaa7f);
            }
            .banner {
                display: flex;
                justify-content: center;
            }
            img {
                width: 800px;
                height: 400px;
                object-fit: cover;
                border-radius: 20px;
            }
        </style>
    </head>
    <body>
        <div class="banner">
            <img src="https://cache.cenguigui.cn/images/lane/1.jpg" alt="banner" />
        </div>
        <script type="text/javascript">
            var num = 1;
            function step_img() {
                if (num < 7) {
                    num++;
                } else {
                    num = 1;
                }
                var dem = document.querySelector('img');
                dem.src = "https://cache.cenguigui.cn/images/lane/" + num + ".jpg";
            }setInterval(step_img, 2000);
        </script>
    </body>
</html>
最后修改:2023 年 12 月 06 日
如果觉得我的文章对你有用,请随意赞赏