Question

我正在尝试重新创建此滑块：https://bewegen.com/en在“加速自行车共享”部分下。我设法创建了计数滑块，但是当它到达9的末尾计数时很难将其恢复为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

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

1 个答案: