当用户到达转盘上的最后一张幻灯片时，循环返回到滑块中的第一张幻灯片

Question

我正在尝试重新创建此滑块： https : //bewegen.com/cn在“加速自行车共享”部分下。 我设法创建了count滑块，但是当它达到9的末尾计数时很难将其恢复为count 1-平稳地使其循环回到起点。

像上面的示例一样，如何使计数循环回到起点？

Here is my codepen work: https://codepen.io/harp30/pen/GYEXXe

谢谢。

Answer 1

您可以像这样修改next()函数：

function next() {
  count = count + 1;
  if (count > num.length - 1) {
    // Clone first item and add it to the end
    var clone = num[0].cloneNode(true);
    countItemNumberHolder.appendChild(clone);

    // Let the transition happen normally
    TweenMax.to(countItemNumberHolder, 0.4, { y: -289 * count });

    // Wait for transition to finish and reset transform to 0 without animation
    setTimeout(function() {
      TweenMax.to(countItemNumberHolder, 0, { y: 0 });
      countItemNumberHolder.removeChild(clone);
    }, 300);

    // Now reset counter
    count = 0;

  } else {
    TweenMax.to(countItemNumberHolder, 0.4, { y: -289 * count });
  }
}

本质上，当您到达最后一个元素时，请克隆第一个元素，并让过渡正常进行。 过渡完成后，将不带动画的变换重置为0 ，然后删除克隆的元素。 同样，您可以对上一个按钮执行相同的操作。

但是，您可能希望在过渡期间删除并添加事件侦听器，否则，如果用户快速单击，可能会导致意外行为。

可以在此处找到更清晰的无限轮播实现： https : //codepen.io/matthewwilliams/pen/Vayrjv