JavaScript案例——06相册选择功能

用在商城网站居多（⭐）

1.1 css实现效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相册的选择</title>
    <style>
      .big img{
        width:415px;
        height: 400px;
        /*float: left;*/
        position: relative;
      }
      .small{
        position: absolute;
        width: 100px;
        height: 100px;
        top:408px;
        display: flex;
      }
    </style>
</head>
<body>
  <div class="big">
    <img src="bu.jpg" alt="">
  </div>

  <div class="small">
    <img src="hu.jpg" alt="">
    <img src="ju.jpg" alt="">
    <img src="ying.jpg" alt="">
    <img src="bu.jpg" alt="">
  </div>

  <script>
    //逻辑：本质上，把小图src赋值给 大图的src
    //图片元素.src = ''

    let imgs = document.getElementsByTagName("img");

    //要从1开始，如果是0，会从大图开始
    for(let i = 1;i<imgs.length;i++){
      imgs[i].onmouseover = function (){
        //把当前小图的src给大图的src
        imgs[0].src = this.src;
        // this.style.border = '1px solod red';
      }
    }
  </script>
</body>
</html>

资料来源：20个JavaScript经典案例_哔哩哔哩_bilibili

0 条评论