js带缩略图的图片切换

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slider with Thumbnails</title>
<style>
  .thumbnail {
    cursor: pointer;
    margin: 5px;
  }
  .thumbnail:hover {
    opacity: 0.7;
  }
  #largeImage {
    width: 300px;
    height: 200px;
  }
</style>
</head>
<body>

<div id="thumbnails">
  <img src="image1-thumb.jpg" class="thumbnail" data-large="image1.jpg">
  <img src="image2-thumb.jpg" class="thumbnail" data-large="image2.jpg">
  <img src="image3-thumb.jpg" class="thumbnail" data-large="image3.jpg">
</div>

<img id="largeImage" src="image1.jpg">

<script>
  document.querySelectorAll('.thumbnail').forEach(thumbnail => {
    thumbnail.addEventListener('click', function() {
      const largeImage = document.getElementById('largeImage');
      largeImage.src = this.getAttribute('data-large');
    });
  });
</script>

</body>
</html>