前端学习笔记JavaScript - 商品展示

• 效果图
  

html代码

<div>
  <img src="image/pic1.jpg" alt="图片" class="mainImage">
  <p></p>
  <ul>
    <li><img src="image/pic1.jpg" alt="图片1"></li>
    <li><img src="image/pic2.jpg" alt="图片2"></li>
    <li><img src="image/pic3.jpg" alt="图片3"></li>
    <li><img src="image/pic4.jpg" alt="图片4"></li>
  </ul>
</div>

css代码

<style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 320px;
      border: 1px solid gray;
      margin: 200px auto;
    }

    ul {
      list-style: none;
      display: flex;
      justify-content: space-between;
    }

    ul li img {
      width: 80px;
      height: 80px;
      vertical-align: bottom;
      box-sizing: border-box;
      border: 3px solid transparent;
    }

    .mainImage {
      width: 320px;
      vertical-align: bottom;
    }

    .listImg {
      border: 3px solid cadetblue;
      cursor: pointer;

    }

    p {
      background-color: gray;
      height: 1px;
    }
  </style>

JavaScript代码

  <script>
    let liList = document.querySelectorAll("li>img");
    let oImg = document.querySelector(".mainImage")

    for (let liImg of liList){
      // -- 移入
      liImg.onmouseenter = function () {
        liImg.className = "listImg";
        oImg.src = liImg.src;
      }
      // -- 移出
      liImg.onmouseleave = function () {
        liImg.className = "";
      }
    }
  </script>