如何使此滑块循环自动延迟？即。1000毫秒

debugcn 发表于 Dev

山姆

谁能解释一下如何使此滑块循环自动进行？

这只是为了简单起见的javascript：

$(document).ready(function(){
  for (var i=1; i <= $('.slider__slide').length; i++){
    $('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
  }
  setTimeout(function(){
    $('.slider__wrap').addClass('slider__wrap--hacked');
  }, 1000);
})

function goToSlide(number){
  $('.slider__slide').removeClass('slider__slide--active');
  $('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}

$('.slider__next, .go-to-next').on('click', function(){
  var currentSlide = Number($('.slider__slide--active').data('slide'));
  var totalSlides = $('.slider__slide').length;
  currentSlide++
  if (currentSlide > totalSlides){
    currentSlide = 1;
  }
  goToSlide(currentSlide);
})

尼古拉斯·西格蒙德

只需将滑动函数移到它自己的函数中，使用setInterval而不是setTimeout循环转换，然后将该滑动函数移到该setInterval中。这是JS：

var loopInterval;

$(document).ready(function(){
  for (var i=1; i <= $('.slider__slide').length; i++){
    $('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
  }
  loopInterval = setInterval(function(){
    $('.slider__wrap').addClass('slider__wrap--hacked');
    slidingFunction();
  }, 10 * 1000);
})

function goToSlide(number){
  $('.slider__slide').removeClass('slider__slide--active');
  $('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}

$('.slider__next, .go-to-next').on('click', nextClick)

function slidingFunction() {
  var currentSlide = Number($('.slider__slide--active').data('slide'));
  var totalSlides = $('.slider__slide').length;
  currentSlide++
  if (currentSlide > totalSlides){
    currentSlide = 1;
  }
  goToSlide(currentSlide);
}

function nextClick(){
  clearInterval(loopInterval);
  loopInterval = setInterval(slidingFunction, 10 * 1000);
  slidingFunction();
}

这是一个codepen：https ://codepen.io/nick-siegmundt/pen/MWwQgVr

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。