逐个点击每个孩子

Question

我有一个没有自动滚动的滑块，所以我需要一个jquery函数来在滑块上添加自动滚动。这些是滑块指示器，可以更改幻灯片。

<div class="slider__navi">
<a href="#" class="slide-nav" data-slide="1">pikachu</a>
<a href="#" class="slide-nav" data-slide="2">piplup</a>
<a href="#" class="slide-nav" data-slide="3">blaziken</a>
<a href="#" class="slide-nav active" data-slide="4">dialga</a>
</div>

我用setInterval这样做：

setInterval(function(){
for (var i = 1 ; i <= 4; i++) {
$('.slide-nav:nth-child(' + i +')').click();
} 
},1000)

但它不对，我想逐个点击每个幻灯片导航，或者等待一段时间逐个添加活动类。

Answer 1

  $(function(){
      $('.slide-nav').click(function(){
          $('.active').removeClass('active');
          $(this).addClass('active');
      });
      let currentLink = 1;
      let linkLengths = $('.slide-nav').length;
      setInterval(function(){
          $('.slide-nav:nth-child(' + currentLink++ +')').click();
          if(currentLink == linkLengths+1 ){
              currentLink = 1;
          }
      }, 1000)
});

这应该做到这一点。 https://jsfiddle.net/msvqyhrd/

Answer 2

试试这个，

<script>
var myIndex = 0;
slideShow();

function slideShow() {
  var i;
  var x = document.getElementsByClassName("slide-nav");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(slideShow, 1000); // Change image every 1 seconds
}
</script>

Answer 3

当您选择所有.slide-nav时，然后逐个单击每个列表项上的事件绑定

间隔是错误的方式

改用它：

    $('.slider__navi').on('click', '.slide-nav', function(){
        var target = $(this).data("slide");
        //do stuff to scroll

        // set active class
        $('.slide-nav').removeClass("active");
        $(this).addClass("active");

        // see target
        console.log(target)
    });