js实现点击小图看大图

最新推荐文章于 2025-07-08 14:32:14 发布

原创最新推荐文章于 2025-07-08 14:32:14 发布 · 824 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的网页图片切换效果，通过HTML、CSS和JavaScript实现。页面包含一个大的背景图片展示区和四个小预览图，点击小图可以更换背景图片。代码中使用了内联样式和事件监听函数来完成图片的切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
       #out{
           height: 400px;
           width: 400px;

       }
        #bigimg{
            height: 300px;
            width: 300px;
             background-image: url(t1.jpg);
            background-size: cover;
        }
        .b{
            height: 80px;
            width: 390px;
            margin-top: 10px;

        }
        .small{
            height: 80px;
            width: 80px;
            float: left;
            background-size: cover;

            margin-left: 5px;
        }
    </style>
    <script>
        function first(){
             document.getElementById('bigimg').style.backgroundImage='url(t1.jpg)';
        }
        function second(){
            document.getElementById('bigimg').style.backgroundImage='url(t2.jpg)';
        }
        function third(){
            document.getElementById('bigimg').style.backgroundImage='url(t3.jpg)';
        }
        function forth(){
            document.getElementById('bigimg').style.backgroundImage='url(t4.jpg)';
        }
    </script>
</head>
<body>
      <div id="out">
          <div id="bigimg"></div>
          <div class="b">
             <div class="small" style="background-image: url(t1.jpg)" onclick="first()"></div>
             <div class="small" style="background-image: url(t2.jpg)" onclick="second()"></div>
             <div class="small" style="background-image: url(t3.jpg)" onclick="third()"></div>
              <div class="small" style="background-image: url(t4.jpg)" onclick="forth()"></div>
          </div>
      </div>
</body>
</html>

效果如下：