js实现小图切换成大图--美女相册小案例

最新推荐文章于 2021-10-15 17:08:21 发布

Friday--星期五

最新推荐文章于 2021-10-15 17:08:21 发布

阅读量947

点赞数

分类专栏： javaScript 笔记文章标签： js javascript html5 es6 css3

本文链接：https://blog.csdn.net/qq_45644092/article/details/105523255

版权

javaScript 笔记专栏收录该内容

13 篇文章 1 订阅

订阅专栏

实现小图切换大图——美女相册小案例

分析：

小图切换大图需要两种图片；
需要点击小图设置onclick；
根据a标签href属性和img标签src属性设置图片连接；
阻止a标签跳转

<!DOCTYPE html>
<html lang="en">
<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>美女相册</title>
  <style>
    body {
      color: #333;
      background-color: #ccc;
    }
    h1 {
      color: #333;
      padding-left: 200px;
    }
    a {
      color: #c60;
      text-decoration: none;
    }
    ul li {
      padding: 0;
      list-style: none;
    }
    ul {
    /*弹性盒子*/
      display: flex;
    }
    li {
      margin: 0px 20px 20px 0px;
      /*主轴两端对齐项目之间，间隔相等*/
      justify-content: space-around;
    }
    ul li a img {
      border: 0px;
      /*让图片占满盒子*/
      display: block;
    }
    #image {
      margin-left: 60px;
    }
  </style>
</head>
<body>
  <h1>美女画廊</h1>
  <ul>	
    <li>
      <a href="../images/1.jpg" title="美女1">
        <img src="../images/1-small.jpg" width="100" alt="美女A">
      </a>
    </li>
    <li>
      <a href="../images/2.jpg" title="美女2">
        <img src="../images/2-small.jpg" width="100" alt="美女B">
      </a>
    </li>
    <li>
      <a href="../images/3.jpg" title="美女3">
        <img src="../images/3-small.jpg" width="100" alt="美女C">
      </a>
    </li>
    <li>
      <a href="../images/4.jpg" title="美女4">
        <img src="../images/4-small.jpg" width="100" alt="美女D">
      </a>
    </li>
  </ul>
  <img id="image" src="../images/placeholder.png" alt="大图" width="400" ;>
  <p>请选择一张图片</p>
  <script>
    // 或取元素
    var ulA = document.querySelectorAll('a');
    var img = document.querySelector('#image');
    var ps = document.querySelector('p');
    // 遍历每个 a 按标签
    for (let i = 0; i < ulA.length; i++) {
      // 事件绑定
      ulA[i].onclick = function () {
        //  设置大图
        img.src = this.href;
        // 设置内容
        ps.innerText = this.title;
        // 阻止a 跳转
        return false
      };
    }
  </script>
</body>
</html>