多个 javascript 图片轮播 - 独立控制和自动移动

Question

我试图在 Stack Overflow 上找到我的问题的答案，但没有找到答案。

作为我 JavaScript 学习的一部分，我正在尝试创建自己的轮播滑块。问题是我试图在同一页面上允许 X 数量的滑块，每个滑块都有自己的自动计时器和控件。当我试图控制其中任何一个时，这被证明是一个问题。例如，如果我手动控制其中一个，另一个就会停止播放，因为 paused 变量设置为 true.

我很确定我的问题要么是变量的范围，要么是没有更具体地定位滑块元素 (e)。我可能看这个太久了，有点失去了对它的看法。我将不胜感激任何对此的建议，甚至只是朝着正确方向的推动。

谢谢。

HTML

<div id="slider-1" class="slider-wrap">
    <div class="slider ">
        <div class="slide-wrap" data-slide="0">
            <div class="slider-slide" style="background-image: url(image1.png)">
                <div class="slide-text text-background">
                    <a href="#">Slide 1</a>
                </div>
            </div>
        </div>
        <div class="slide-wrap" data-slide="1">
            <div class="slider-slide" style="background-image: url(image2.png)">
                <div class="slide-text text-background">
                    <a href="#">Slide 2</a>
                </div>
            </div>
        </div>
        <div class="slide-wrap current-slide" data-slide="2">
            <div class="slider-slide" style="background-image: url(image3.png)">
                <div class="slide-text text-background">
                    <a href="#">Slide 3</a>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript

// Setup variables
let helpers = require('./helpers.js')
let sliders = document.getElementsByClassName('slider-wrap')
let paused = false

//Get all sliders on page and start slider function
for (var i = 0; i < sliders.length; i++) {
  let slideIndex = 0
  let e = sliders[i]
  slider(e, slideIndex)
  autoChange(e, slideIndex)
}

// Slider function which adds indicator click listeners
function slider (e, slideIndex) {
  let element = e
  let interval
  let indicators = e.getElementsByClassName('slide-indicator')
  for (var i = 0; i < indicators.length; i++) {
    indicators[i].addEventListener('click', function (e) {
      let slideIndex = Number(e.target.dataset.slide)
      paused = true
      if (helpers.hasClass(e.target, 'current') === false) {
        clearTimeout(interval)
        sliderChange(element, slideIndex)
      }
    })
  }
}

// Change slider based on index and update classes
function sliderChange (e, slideIndex) {
  let slides = e.getElementsByClassName('slide-wrap')
  let indicators = e.getElementsByClassName('slide-indicator')
  let num = slides.length - 1
  let prev = e.querySelector('.current-slide')

  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove('current-slide')
      indicators[i].classList.remove('current')
  }

  slides[slideIndex].classList.add('current-slide')
  indicators[slideIndex].classList.add('current-indicator')

  if (paused === false) {
      autoChange(e, slideIndex)
  }

}

// Automatically change slide
function autoChange (e, slideIndex) {
  let slides = e.getElementsByClassName('slide-wrap')
  let num = slides.length - 1
  if (slideIndex === num) {
    slideIndex = 0
  } else {
    slideIndex++
  }
  interval = setTimeout(function () {
    sliderChange(e, slideIndex)
  }, 3000)
}

Answer 1

作为全局变量暂停至少是一个问题。我建议您为每个滑块创建一个 javascript 对象，以便每个滑块都有自己的 "paused" 属性.

let sliders = document.getElementsByClassName('slider-wrap')
var sliderObjects = []
for (i = 0; i < sliders.length; i++) {
    var slider = {slider: sliders[i], paused: false}
    sliderObjects[i] = slider
}

这里有一些关于 JavaScript 对象的有用参考：https://www.w3schools.com/js/js_objects.asp

多个 javascript 图片轮播 - 独立控制和自动移动

Multiple javascript image carousels - independent controls and automatic movement

javascript

scope

slider

settimeout

cleartimeout