用js之事件实现轮播图

最新推荐文章于 2023-05-30 22:55:51 发布

你好哇L

最新推荐文章于 2023-05-30 22:55:51 发布

阅读量273

点赞数

文章标签： javascript css

本文链接：https://blog.csdn.net/axxxxuuu/article/details/108609500

版权

用js之事件实现轮播图

需求：点击轮流更换图片
效果图：
在这里插入图片描述

<style>
        .box {
            position: relative;
            width: 350px;
            height: 350px;
            background-color: #00a;
            margin: 50px auto;
            background-image: url('./image/b1.jpg');
        }

        .pic {
            position: absolute;
            width: 80px;
            height: 25px;
            bottom: 0;
            left: 40%;
            text-align: center;
            /* margin-left: -50px; */
            font-size: 20px;

        }
    </style>

<body>
    <div class="box">
        <input type="text" class="pic" value="下一张">
    </div>
    <script>
        // 设置一个数组图片名字
        let picture = [1, 2, 3, 4, 5];
        let i = 0;

        // 获取元素
        let box = document.querySelector('.box');
        let pic = document.querySelector('.pic');

        // 点击pic更换图片
        pic.onclick = function () {
            i++;
            if (i > picture.length - 1) {
                i = 0;
            }
            box.style.backgroundImage = ` url('./image/b${picture[i]}.jpg')`;
        }
    </script>
</body>

代码与上一篇博客的彩虹案例相似

你好哇L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用js之事件实现轮播图

用js之事件实现轮播图需求：点击轮流更换图片效果图：<style> .box { position: relative; width: 350px; height: 350px; background-color: #00a; margin: 50px auto; background-image: url('./image/b1
复制链接

扫一扫

用js之事件实现轮播图

用js之事件实现轮播图

“相关推荐”对你有帮助么？