js代码带缩略图的幻灯片图片切换

基础概念

幻灯片图片切换是一种常见的网页交互效果，通过JavaScript控制图片的显示和隐藏，实现图片的自动或手动切换。缩略图通常用于提供一个图片的预览，用户可以通过点击缩略图来切换主图。

类型

自动播放：图片按照设定的时间间隔自动切换。
手动控制：用户通过点击按钮或缩略图来切换图片。
无限循环：图片切换到最后一幅后会重新从第一幅开始。

应用场景

产品展示页：展示多个产品的图片。
新闻动态：轮播最新的新闻图片。
广告宣传：在网站首页展示广告图片。

示例代码

以下是一个简单的JavaScript实现带缩略图的幻灯片图片切换的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slider with Thumbnails</title>
<style>
  .slider {
    width: 600px;
    height: 400px;
    overflow: hidden;
    position: relative;
  }
  .slider img {
    width: 100%;
    height: auto;
    display: none;
  }
  .thumbnails {
    margin-top: 10px;
  }
  .thumbnails img {
    width: 100px;
    height: auto;
    cursor: pointer;
  }
</style>
</head>
<body>

<div class="slider">
  <img src="image1.jpg" alt="Image 1" id="mainImage">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

<div class="thumbnails">
  <img src="image1.jpg" alt="Thumbnail 1" onclick="changeImage(this.src)">
  <img src="image2.jpg" alt="Thumbnail 2" onclick="changeImage(this.src)">
  <img src="image3.jpg" alt="Thumbnail 3" onclick="changeImage(this.src)">
</div>

<script>
function changeImage(src) {
  var images = document.querySelectorAll('.slider img');
  for (var i = 0; i < images.length; i++) {
    images[i].style.display = 'none';
  }
  document.getElementById('mainImage').src = src;
  document.getElementById('mainImage').style.display = 'block';
}
</script>

</body>
</html>