Question

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

作为我学习JavaScript的一部分，我正在尝试创建自己的轮播滑块。问题是我试图在同一页面上允许X个滑块，每个滑块都有自己的自动定时器和控件。当我试图控制其中任何一个时，这被证明是一个问题。例如，如果我手动控制其中一个，则另一个停止播放，因为暂停的变量设置为 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对象，这样每个滑块都有自己的“暂停”属性。

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图像轮播 - 独立控制和自动运动

1 个答案: