JavaScript_网页中单击按钮切换图片

最新推荐文章于 2022-12-03 23:29:34 发布

Etui۹(･༥･´)و ̑̑

最新推荐文章于 2022-12-03 23:29:34 发布

阅读量645

点赞数 2

分类专栏： JavaScript CSS3 HTML5 文章标签： javascript html5 html css css3

本文链接：https://blog.csdn.net/m0_47015897/article/details/115217032

版权

CSS3 同时被 3 个专栏收录

38 篇文章 16 订阅

订阅专栏

HTML5

37 篇文章 8 订阅

订阅专栏

JavaScript

30 篇文章 0 订阅

订阅专栏

本案例效果如图：
在这里插入图片描述
实现源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片切换</title>
        <!-- <link rel="stylesheet" href="./css/reset.css"> -->
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            body{
                background-color: coral;
            }
            .outer{
                /* display: flex; */
                width: 550px;
                height: 400px;
                margin: 50px auto;
                background-color:beige;
            }
            .outer .imgs{
                list-style: none;
                width: 500px;
                height: 332px;
                margin: 0px auto;
                padding-top: 25px;
            }
            .outer .btn{
                text-align: center;
                margin: 10px auto;
                font-size: large;
            }
            button{
                background-color: coral;
                width: 50px;
                height: 25px;
                /* border: 0px; */
                color:aquamarine;
            }
        </style>
        <script>
            window.onload = function(){
                //获取两个按钮
                var prev = document.getElementById("prev");
                var next = document.getElementById("next");

                var imgArr = ["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.jpg","./img/5.jpg"];
                var imgs = document.getElementsByTagName("img");
                var index = 0;
                //分别为两个按钮绑定单击响应函数
                
                prev.onclick = function(){
                    if(--index < 0){
                        alert("当前已是第一张图片！");
                        index++;
                    }else{
                        imgs[0].src = imgArr[index];
                    }
                };
                next.onclick = function(){
                    if(++index > 4){
                        alert("当前已是最后一张图片！");
                        index--;
                    }else{
                        imgs[0].src = imgArr[index];
                    }
                };
                /* 
                    要切换图片就是要修改img的src属性
                 */
            };
        </script>
    </head>

    <body>
        <div class="outer">
            <div class="imgs">
                <img src="./img/1.jpg" alt="">
            </div>
            <div class="btn">
                <button id="prev">上一张</button>
                <button id="next">下一张</button>
            </div>
        </div>
    </body>
</html>

Etui۹(･༥･´)و ̑̑

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript_网页中单击按钮切换图片

本案例效果如图：实现源码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片切换</title>  <style> *
复制链接

扫一扫