JS - 事件 - 小例子之图片的切换+图片的隐藏和显示

最新推荐文章于 2024-09-22 16:14:55 发布

一只前端小菜鸟~

最新推荐文章于 2024-09-22 16:14:55 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端 - JavaScript JavaScript学习指南

本文链接：https://blog.youkuaiyun.com/weixin_37580235/article/details/80762269

web前端 - JavaScript 同时被 2 个专栏收录

45 篇文章

订阅专栏

JavaScript学习指南

33 篇文章

订阅专栏

本文介绍三个使用JavaScript实现的图片操作案例：图片切换、隐藏与显示及简易相册功能。通过这些实例，读者可以了解如何利用JavaScript操作DOM元素，实现图片的动态加载与交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.图片的切换

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JS</title>
    </head>
    <body>
        <img id="icon" src="../images/icon-01.jpg" alt="">
        <p></p>
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
        <script type="text/javascript">
            window.onload = function() {
             //1.获取需要的标签
                var icon = document.getElementById("icon");
                var prev = document.getElementById("prev");
                var next = document.getElementById("next");


            //2.监听按钮的点击
                var maxIndex = 5,minIndex = 1,currentIndex = minIndex;
                //上一张
                prev.onclick = function() {
                    if (currentIndex === minIndex) {
                        currentIndex = maxIndex;
                    } else {
                        currentIndex--;
                    }
                    icon.setAttribute("src", "../images/icon-0" + currentIndex + ".jpg");
                };

                //下一张
                next.onclick = function() {
                    if (currentIndex === maxIndex) {
                        currentIndex = minIndex;
                    } else {
                        currentIndex++;
                    }
                    icon.setAttribute("src", "../images/icon-0" + currentIndex + ".jpg");
                };
             }
        </script>
    </body>
</html>

2.图片的隐藏和显示

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JS</title>
    </head>
    <body>
        <button id="btn">隐藏</button>
        <p></p>
        <img src="../images/icon-01.jpg" alt="">
        <script type="text/javascript">
            window.onload = function() {
             //1.获取事件源
                var btn = document.getElementById("btn");
                var img = document.getElementsByTagName("img")[0];

             //2.绑定事件
                btn.onclick = function() {
                if (btn.innerText === "隐藏") {
                    img.style.display = "none";
                    btn.innerText = "显示";
                } else {
                    img.style.display = "block";
                    btn.innerText = "隐藏";
                }
            }
        }
        </script>
    </body>
</html>

3.简化版相册

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JS</title>
        <style>
        * {
	margin:0;
	padding:0;
	list-style:none;
        }
        ul {
	width:540px;
	height:100px;
	display:flex;
	justify-content:space-around;
        }
        li {
	width:100px;
	height:100px;
	float:left;
        }
        </style>
    </head>
    <body>
        <!--大图描述-->
        <p id="des">蒲公英</p>
        <!--大图展示-->
        <img id="big_img" src="../images/img-01.jpg" alt="" width="540px" height="540px">
        <!--小图列表-->
        <ul id="fj">
          <li>
              <a href="../images/img-01.jpg" title="蒲公英">
                  <img src="../images/img-01.jpg" alt="蒲公英" width="100px" height="100px">
            </a>
          </li>
          <li>
              <a href="../images/img-02.jpg" title="热气球">
                  <img src="../images/img-02.jpg" alt="热气球" width="100px" height="100px">
              </a>
          </li>
          <li>
              <a href="../images/img-03.jpg" title="小屋">
                  <img src="../images/img-03.jpg" alt="小屋" width="100px" height="100px">
              </a>
          </li>
          <li>
              <a href="../images/img-04.jpg" title="河流">
                  <img src="../images/img-04.jpg" alt="河流" width="100px" height="100px">
              </a>
          </li>
          <li>
              <a href="../images/img-05.jpg" title="山川">
                  <img src="../images/img-05.jpg" alt="山川" width="100px" height="100px">
              </a>
          </li>
    </ul>
        <script type="text/javascript">
            window.onload = function() {
             //1.获取事件源
                var ul = document.getElementById("fj");
                var aList = ul.getElementsByTagName("a");


                var des = document.getElementById("des");
                var big_img = document.getElementById("big_img");


                //2.绑定事件
                for (var i = 0; i < aList.length; i++) {
                    aList[i].onclick = function() {
                    console.log(this.href);
                    big_img.src = this.href;


                    console.log(this.title);
                    des.innerText = this.title;
                    return false; //禁止点击后跳转到图片
                }
            }
        }
        </script>
    </body>
</html>