画廊（点击切换到对应图片）

画廊（点击切换到对应图片）

css代码

  * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
        overflow: hidden;
      }
      ul > li {
        float: left;
        width: 300px;
      }
      li > img {
        width: 100%;
      }

html代码

<div class="box">
      <h1>美女画廊</h1>
      <ul>
        <li><img src="./images/pic1.png" alt="" title="美女A" /></li>
        <li><img src="./images/pic2-3.png" alt="" title="美女B" /></li>
        <li><img src="./images/pic2-4.png" alt="" title="美女C" /></li>
        <li><img src="./images/pic3-2.png" alt="" title="美女D" /></li>
      </ul>
      <img id="imgBig" src="./images/pic1.png" alt="" />
      <h1 id="bottomWord">美女A</h1>
    </div>

js代码

//获取元素
 var smallImg = document
      .getElementsByTagName("ul")[0]
      .getElementsByTagName("img");
 var imgBig = document.getElementById("imgBig");
 var bottomWord = document.getElementById("bottomWord");
 //循环遍历
 for (var i = 0; i < smallImg.length; i++) {
      smallImg[i].onclick = function () {
        imgBig.src = this.src;
        bottomWord.innerText = this.title;
      };
    }