同一页面上存在多个 javascript 幻灯片的问题

Question

我正在尝试使用同一段 JavaScript 代码制作多个幻灯片。

这是我的 HTML 代码：

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

</div>

这是主要的CSS：

.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;
}

这是 javascript :

const sliderContainer = document.querySelector(".slider-container");
const slide = sliderContainer.querySelectorAll(".slide");
let currentSlide = 0;
        
function changeSlide() {
    slide[currentSlide].style.opacity = 0;
    currentSlide = (currentSlide + 1) % slide.length;
    slide[currentSlide].style.opacity = 1;
}
        
function startSlider() {
    intervalId = setInterval(changeSlide, 2000);
}
        
function stopSlider() {
    clearInterval(intervalId);
}
        
startSlider();
sliderContainer.addEventListener("mouseenter", stopSlider);
sliderContainer.addEventListener("mouseleave", startSlider);

此 JavaScript 对于一张幻灯片效果很好，但我无法在同一页面上显示多个幻灯片。理想情况下，我希望为所有幻灯片保留相同的类，并且显然使进入/离开鼠标事件对每个幻灯片单独工作。有什么帮助吗？

Answer 1

要处理一个页面上具有独立行为的多个滑块，您需要调整 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

   参数，该参数将用于识别每个滑块容器。
2. 在函数内部，我使用

   document.getElementById

   根据提供的

   sliderId

   查找特定的滑块容器。
3. 其余逻辑封装在函数内，确保每个滑块独立运行。

因此，您可以通过使用不同的

createSlider

值调用

sliderId

来创建所需数量的滑块。每个滑块都有自己的一组事件监听器，并且独立于其他滑块运行。