通过原生js实现美女画廊

等归,

已于 2022-11-19 23:55:26 修改

阅读量292

点赞数

文章标签： javascript 前端开发语言

于 2022-11-18 21:45:26 首次发布

本文链接：https://blog.csdn.net/weixin_50370865/article/details/127930169

版权

美女画廊

1、思路：

	1、搭建静态页面
    2、获取元素
    3、遍历小图
    4、给每个小图绑定事件
    5、把小图的src属性赋值给大图的src
    6、把小图的title属性赋值给类名为title的盒子

2、静态页面代码展示：

<body>
  <!-- 1、搭建静态页面 -->
  <h1>美女画廊</h1>

  <!-- 小图 -->
  <ul id="list">
    <li><img src="./images/1.jfif" alt="" title="美女A"></li>
    <li><img src="./images/2.webp" alt="" title="美女B"></li>
    <li><img src="./images/3.webp" alt="" title="美女C"></li>
    <li><img src="./images/4.webp" alt="" title="美女D"></li>
  </ul>
  <!-- 大图 -->
  <div id="box">
    <img src="./images/1.jfif" alt="" id="bigImg">
  </div>
  <!-- 字 -->
  <div class="title">
    美女A
  </div>
</body>

3、css样式：

<style>
    #list {
      overflow: hidden;
    }

    #list li {
      width: 200px;
      height: 150px;
      float: left;
      list-style: none;
    }

    li img {
      width: 100%;
      height: 100%;
    }

    #box {
      width: 600px;
      height: 400px;
    }

    #box img {
      width: 100%;
      height: 100%;
    }

    .title {
      font-size: 30px;
      font-weight: bold;
    }
  </style>

4、js代码

 <script>
  // 2、获取元素
  var smallList = document.getElementById('list').getElementsByTagName('img')
  console.log(smallList);
  var bigImg = document.getElementById('bigImg')
  console.log(bigImg);
  var title = document.getElementsByClassName('title')[0]
  console.log(title);
  // 3、遍历小图
  for (var i = 0; i < smallList.length; i++) {
    console.log(smallList[i]);
    // 4、给每个小图绑定事件
    smallList[i].onclick = function () {
      console.log('测试');
      console.log(this);

      // 5、把小图的src属性赋值给大图的src
      bigImg.src = this.src;
      // 6、把小图的title属性赋值给类名为title的盒子
      title.innerText = this.title;
    }
  }
</script>