js带缩略图轮播插件

// 示例代码：懒加载
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

// 示例代码：同步缩略图与主图片
function showImage(index) {
  var mainImage = document.getElementById('main-image');
  var thumbnails = document.querySelectorAll('.thumbnail');
  thumbnails.forEach(function(thumbnail, i) {
    if (i === index) {
      thumbnail.classList.add('active');
      mainImage.src = thumbnail.dataset.src;
    } else {
      thumbnail.classList.remove('active');
    }
  });
}

/* 示例代码：响应式设计 */
@media (max-width: 600px) {
  .carousel {
    width: 100%;
  }
  .thumbnail {
    width: 30%;
  }
}