wsnbbxwj 2022-12-27 13:19 采纳率: 33.3%
浏览 32
已结题

切换图片，并且更改属性

怎么做，完全没思路。怎么做，完全没思路
怎么做，完全没思路。怎么做，完全没思路

img

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2022-12-27 15:02
    关注

    参考这个 

    
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #h1 {
      width: 300px;
      height: 200px;
    }

    #image_ul {
      display: flex;
    }

    #image_ul img {
      width: 100px;
      height: 50px;
    }

    .active {
      border: 2px solid red;
    }

    .show_btn {
      border: none;
    }
  </style>
</head>

<body>
  <img id="h1" src="https://img2.baidu.com/it/u=2666428851,2803796192&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
    alt="">
  <div id="image_ul">
    <img id="li1" class="active" onclick="show(this)"
      src="https://img2.baidu.com/it/u=2666428851,2803796192&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
    <img id="li3" class="show_btn" onclick="show(this)"
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F1fcc576d60396a385003543dbab1ac8a9d32f72e.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674715864&t=9822598193f65aabe01fee433814c378"
      alt="">
    <img id="li4" class="show_btn" onclick="show(this)" src="" alt="">
    <img id="li5" class="show_btn" onclick="show(this)" src="" alt="">
  </div>
</body>
<script>

  function show(e) {
    let h1 = document.getElementById("h1"); //获取 h1
    h1.src = e.src; //赋值 h1 点击 图片的 src
    let image_ul = document.getElementById("image_ul");
    let imgs = image_ul.getElementsByTagName("img");
    for (var i = 0; i < imgs.length; i++) {
      if (e.id == imgs[i].id) {
        e.className = "active";
      } else {
        imgs[i].className = "show_btn"
      }
    }

  }
</script>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
    1人已打赏
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 1月4日
  • 已采纳回答 12月27日
  • 创建了问题 12月27日

悬赏问题

  • ¥15 ogg dd trandata 报错
  • ¥15 高缺失率数据如何选择填充方式
  • ¥50 potsgresql15备份问题
  • ¥15 Mac系统vs code使用phpstudy如何配置debug来调试php
  • ¥15 目前主流的音乐软件，像网易云音乐，QQ音乐他们的前端和后台部分是用的什么技术实现的?求解！
  • ¥60 pb数据库修改与连接
  • ¥15 spss统计中二分类变量和有序变量的相关性分析可以用kendall相关分析吗？
  • ¥15 拟通过pc下指令到安卓系统，如果追求响应速度，尽可能无延迟，是不是用安卓模拟器会优于实体的安卓手机？如果是，可以快多少毫秒？
  • ¥20 神经网络Sequential name=sequential, built=False
  • ¥16 Qphython 用xlrd读取excel报错