Question

我想知道如何循环这个自动滑动功能？它的时间表如下：https://bm-translations.de/#sprachrichtungen

我尝试使用if条件检查下一张幻灯片是否有项目，但也许是因为我是初学者，它不起作用。

function timeLineAutoPlay() {
  var current = 0;

  setInterval(function() {
    current++;
    var current_elem = $($('.events a')[current - 1]);

    if (current == 11) {
      timeLineAutoPlay();
    }

    $($('.events a')[current]).trigger('click');

    if ((current + 1) % 4 == 0) {
      $('.next').trigger('click');
    }
  }, 8000);
}

timeLineAutoPlay();

滑块在这里：https://codyhouse.co/gem/horizontal-timeline/

第二个问题： 如果我点击日期，下一个autoslide不是之后的日期。你知道如何调整这段代码吗？

试过这个，但它不起作用：

timelineComponents['eventsWrapper'].on('click', 'a', function(event){
    current = items.length;
}

Answer 1

模运算符可用于包装特定数字并创建循环：

编辑：包含手动滑块控件的示例 编辑2：修复了函数调用中的拼写错误

// The interval id for the auto-slider if currently running.
var intervalId;
// The current slide index
var current = 0;
// Query document for the DOM nodes
var items = $('.events a');

// Clicks on `a` will bubble up to their `li` element and then to `div.events`.
// We can use this to listen to the click on li and then see which one was
// targeted.
$('.events').on('click', 'li', function(event) {
  // If the third `li` was clicked, there are 2 in front of it so 2 is the index
  // of the item that was clicked.
  var count = $(this).prevAll('li').length;

  // Update the current item based on the clicked element.
  current = count;

  // Reset the interval so the next slide does not occur immediately after the
  // user has clicked.
  if (intervalId != null) {
    // Clear previous auto-play
    clearInterval(intervalId);
    // And start a new one which will first trigger 8000ms from now.
    intervalId = timeLineAutoPlay();
  }
});

function timeLineAutoPlay() {
  // Return the interval id so that we can can cancel it later.
  return setInterval(function() {
    // Increment `current` but wrap at `items.length`, thus looping through the
    // list of items.
    //
    // E.g. for 4 items; items.length === 4:
    //   current : 0 -> 1 -> 2 -> 3 -> 0 -> 1 -> ...
    current = (current + 1) % items.length;

    // Get the item at the current index
    var item = items.eq(current);

    // This would lead to multiple interval loops being spawned whenever we
    // reach 11. That seems unintentional.
    //
    // if (current == 11) {
    //   timeLineAutoPlay();
    // }

    item.trigger('click');
  }, 8000);
}

// Start the initial auto-slide and store the id
intervalId = timeLineAutoPlay();

Answer 2

如下所示：

setInterval(function(){
    var current_elem = $($('.events a')[current]);

    if(!current_elem.hasClass("selected")){
        $(".events a").each( function(index, elem) {
            if($(this).hasClass("selected")){
                current = index;
            }   
        });  
    }

    current++;

    if(current >= $('.events a').length) {
        current = 0;
    }

    $($('.events a')[current]).trigger('click');
}, 7000);

制作时间轴滑块循环

2 个答案: