當用戶到達轉盤上的最后一張幻燈片時，循環返回到滑塊中的第一張幻燈片

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