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

在全部选中.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)
    });

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

  $(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/

逐个点击添加每个孩子

3 个答案: