博客

图片切换用JavaScript来写的话代码稍微有点多，如果用jQuery的话就简单的多了。

首先先写好HTML和css的代码：

HTML：

<div id="box">
    <img src="../0bed5d59f12720752019fc2b8ad48993.jpg" alt="">
    <img src="../1c34660a6917f03b1249f8a1923d36ef.jpg" alt="">
    <img src="../83f4b8dc41fe069de22b7e736c580497.jpg" alt="">
  </div>

图片的话随意就好。

CSS代码部分：

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

    body {
      background-image: url("../0bed5d59f12720752019fc2b8ad48993.jpg");
    }

    #box {
      height: 200px;
      text-align: center;
    }

    #box img {
      width: 200px;
      margin-top: 35px;
      cursor: pointer;
    }
  </style>

先把body的背景换成第一张图片，当然这些也只是临时弄的。

效果的话差不多是这样：



然后点击其他图片是切换不了的，要用jQuery来写，首先先引入jQuery插件，不然写的代码是用不了的。然后代码部分是这样：

<script>
    $('img').click(function () {
      $('body').css('background-image', `url(${$(this).attr('src')})`);
    })
  </script>

先获取到图片的点击，然后把body的背景图片切换到你所点击的图片，这样就完成了。