通过点击按钮，实现图片的切换。最简单的js方法！

最新推荐文章于 2023-08-29 19:44:57 发布

远方的原

最新推荐文章于 2023-08-29 19:44:57 发布

阅读量1.7w

点赞数 9

分类专栏：前端

本文链接：https://blog.csdn.net/qq_44890362/article/details/119607415

版权

JavaScript HTML CSS 图片轮播事件处理

关键词由CSDN通过智能技术生成

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

大家可以看到上面的图片，以及它的两个按钮。废话不多说，开始展示代码！

1.首先是HTML结构代码，非常简单。

<body>
    <div class="banner">
        <img id="img" src="img/1.jpg" alt="">
        <p>
            <button id="btnPrev">上一张</button>
            <button id="btnNext">下一张</button>
        </p>
    </div>
   
</body>

2.然后展示的是css样式代码。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .banner {
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }

        button {
            border: 1px solid transparent;
            margin: 0 10px;
        }

        button:hover {
            cursor: pointer;
            background-color: #f40;
            color: #fff;
            border-color: #ccc;

        }

        .banner img {
            width: 100%;
            height: 300px;
            /* object-fit: cover; */
            max-width: 100%;
            min-height: 100%;
            border: 1px solid;
        }
    </style>
</head>

3.最后也是比较关键的，展示js代码。

    <script>
        // 1.定义一个数组用来存放图片的地址
        var arr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg"];
        // 2.获取一下元素对象
        var btns = document.querySelectorAll('button');
        var img = document.querySelectorAll('img')[0];
    
        // 定义一个全局变量
        var num = 0;
        // 3.绑定事件、
        //下一张
        btns[1].onclick = function(){
            console.log(btns[1]);
            num++;
            // 这个地方需要注意，当我们图片对应的下标加到最大时候，我们需要将下标设置回第一张
            if(num  > 5){
                num = 0;
            }
            //img对象调用它的src属性，实现改变图片的路径
            img.src = arr[num];
            console.log(img.src);
        }
        // 上一张
        btns[0].onclick = function(){
            console.log(btns[0]);
            num--;
            if(num  < 0){
                num = 5;
            }
            img.src = arr[num];
            console.log(img.src);

        }
    </script>

远方的原

关注

9
点赞
踩
94

收藏

觉得还不错? 一键收藏
0
评论
通过点击按钮，实现图片的切换。最简单的js方法！

大家可以看到上面的图片，以及它的两个按钮。废话不多说，开始展示代码！1.首先是HTML结构代码，非常简单。<body> <div class="banner"> <img id="img" src="img/1.jpg" alt=""> <p> <button id="btnPrev">上一张</button>...
复制链接

扫一扫

专栏目录