要在一个页面上处理具有独立行为的多个滑块，您需要更改JS代码以单独处理每个滑块。
第一种方法是将每个滑块的功能封装在一个函数中，然后为每个滑块创建示例。
下面是你的代码：
html：

<div class="slider-container">
  <div class="slider" id="slider1">
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
  </div>

  <div class="slider" id="slider2">
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
  </div>
</div>

字符串
JavaScript：

function createSlider(sliderId) {
  const sliderContainer = document.getElementById(sliderId);
  const slides = sliderContainer.querySelectorAll(".slide");
  let currentSlide = 0;
  let intervalId;

  function changeSlide() {
    slides[currentSlide].style.opacity = 0;
    currentSlide = (currentSlide + 1) % slides.length;
    slides[currentSlide].style.opacity = 1;
  }

  function startSlider() {
    intervalId = setInterval(changeSlide, 2000);
  }

  function stopSlider() {
    clearInterval(intervalId);
  }

  startSlider();
  sliderContainer.addEventListener("mouseenter", stopSlider);
  sliderContainer.addEventListener("mouseleave", startSlider);
}

// Create instances for each slider
createSlider("slider1");
createSlider("slider2");

型
代码中的更改：

1. createSlider函数接受sliderId参数，该参数将用于标识每个滑块容器。
   1.在函数内部，我使用document.getElementById根据提供的sliderId查找特定的滑块容器。
   1.其余的逻辑封装在函数中，确保每个滑块独立工作。
   因此，您可以通过使用不同的sliderId值调用createSlider来创建任意多个滑块。每个滑块都有自己的一组事件侦听器，并且独立于其他滑块运行。

试试这个：

const sliderContainer = document.querySelector(".slider-container");
const slider = sliderContainer.querySelectorAll(".slider");
let intervals = [];

function startSlider() {
  slider.forEach(everySlider => {
    const slides = everySlider.children;
    let count = 0;
    const intervalId = setInterval(() => {
      if(count === slides.length){
        count = 0;
      }
      for(let i=0; i<slides.length; i++){
        slides[i].style.opacity = 0;
      }
      slides[count].style.opacity = 1;
      count++;
    }, 2000);
    intervals.push(intervalId);
  });
}

function stopSlider(){
  intervals.forEach(interval => clearInterval(interval));
}

startSlider();
sliderContainer.addEventListener("mouseenter", stopSlider);
sliderContainer.addEventListener("mouseleave", startSlider);

.slider-container{
    width:50%;
}
        
.slider{
    width:100%;
    position:relative;
    padding-bottom:75%; /* aspect-ratio 4/3 */
}
        
.slide{
    width:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    transition:opacity 0.5s ease-in;
}
        
.slide:first-child{
    opacity:1;
}

<div class="slider-container">
    <div class="slider">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
        <div class="slide">4</div>
    </div>
    
    <div class="slider">
        <div class="slide">5</div>
        <div class="slide">6</div>
        <div class="slide">7</div>
        <div class="slide">8</div>
    </div>
</div>