<script> var images = document.querySelectorAll('.banner img'); var index = 0; setInterval(function() { images[index].classList.remove('active'); index = (index + 1) % images.length; images[index].classList.add('active'); }, 3000); var slideshowContainer = document.querySelector('.slideshow-container'); var images = slideshowContainer.querySelectorAll('img'); var currentImageIndex = 0; setInterval(function() { var currentImage = images[currentImageIndex]; var nextImageIndex = (currentImageIndex + 1) % images.length; var nextImage = images[nextImageIndex]; currentImage.style.opacity = 0; currentImage.style.display = 'none'; nextImage.style.opacity = 1; nextImage.style.display = 'block'; currentImageIndex = nextImageIndex; }, 3000); </script>让这两个轮播图互不干扰怎么改

为了让这两个轮播图互不干扰，可以给它们分别加上不同的Class名称，同时修改其中的计时器变量和轮播图片变量，代码如下：

<script>
  // 第一个轮播图
  var bannerImages = document.querySelectorAll('.banner img');
  var bannerIndex = 0;
  setInterval(function() {
    bannerImages[bannerIndex].classList.remove('active');
    bannerIndex = (bannerIndex + 1) % bannerImages.length;
    bannerImages[bannerIndex].classList.add('active');
  }, 3000);

  // 第二个轮播图
  var slideshowContainer = document.querySelector('.slideshow-container-2');
  var slideshowImages = slideshowContainer.querySelectorAll('img');
  var slideshowIndex = 0;
  setInterval(function() {
    var currentImage = slideshowImages[slideshowIndex];
    var nextImageIndex = (slideshowIndex + 1) % slideshowImages.length;
    var nextImage = slideshowImages[nextImageIndex];
    currentImage.style.opacity = 0;
    currentImage.style.display = 'none';
    nextImage.style.opacity = 1;
    nextImage.style.display = 'block';
    slideshowIndex = nextImageIndex;
  }, 3000);
</script>

其中，第一个轮播图的Class名称为`.banner`，第二个轮播图的Class名称为`.slideshow-container-2`，两个轮播图使用了不同的计时器变量和轮播图片变量，避免了互相干扰。