html+css+js制作图片幻灯片效果代码(单击标签切换)

一个简单的HTML+Css+JavaScript代码示例，用于创建一个幻灯片式的图片切换效果：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多图片单击标签进行切换的html+css+js代码</title>
  <style>
    body {
      font-family: "Lato", sans-serif;
    }

    .tablink {
      background-color: #555;
      color: white;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      font-size: 17px;
      width: 20%;
    }

    .tablink:hover {
      width: 20%;
      background-color: #777;
    }

    /* Style the tab content */
    .tabcontent {
      color: white;
      display: none;
      padding: 8px;
      padding-bottom: 12px;
      text-align: center;
    }

    .tabcontent img {
      width: 100%;
      height: auto;
    }

    
    #London {
      background-color:#FF6666;
    }

    #Paris {
      background-color: green;
    }

    #Tokyo {
      background-color: blue;
    }

    #Oslo {
      background-color: orange;
    }

    #Teal {
      background-color: #109999;
    }
    
  </style>
</head>

<body>
  <div id="London" class="tabcontent">
      <img src="image1.jpg" alt="Image 1">
  </div>

  <div id="Paris" class="tabcontent">
    <img src="image2.jpg" alt="Image 1">
  </div>

  <div id="Tokyo" class="tabcontent">
    <img src="image3.jpg" alt="Image 1">
  </div>

  <div id="Oslo" class="tabcontent">
    <img src="image4.jpg" alt="Image 1">
  </div>

  <div id="Teal" class="tabcontent">
    <img src="image5.jpg" alt="Image 1">
  </div>

  <button class="tablink" onclick="openCity('London', this, '#FF6666')" id="defaultOpen">辉宇星空</button>
  <button class="tablink" onclick="openCity('Paris', this, 'green')">电脑城</button>
  <button class="tablink" onclick="openCity('Tokyo', this, 'blue')">金点子</button>
  <button class="tablink" onclick="openCity('Oslo', this, 'orange')">电脑城</button>
  <button class="tablink" onclick="openCity('Teal', this, '#109999')">江湾明珠</button>

  <script>
    function openCity(cityName, elmnt, color) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablink");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
      }
      document.getElementById(cityName).style.display = "block";
      elmnt.style.backgroundColor = color;
    }
    // 触发 id="defaultOpen" click 事件
    document.getElementById("defaultOpen").click();
  </script>
</body>

</html>

注：把以上代码存放在html文件中，并在同目录中放入5张名为image1.jpg image2.jpg image3.jpg image4.jpg image5.jpg的图片，即可测试效果