javascript - 使用 jQuery 将轮播功能添加到选项卡

Question

我正在寻找某种方法来使用我的选项卡实现轮播，或者为具有轮播功能的选项卡编写其他代码。

我已经编写了制作“上一个”和“下一个”按钮的代码。

现在我只想在屏幕上显示 5 个标签。

假设我有 8 个标签，我正在查看标签 1 到 5，所以标签 6、7、8 被隐藏了。

当我在第 5 个选项卡上并单击“下一步”按钮时，我想显示第 6 个选项卡并隐藏第 1 个选项卡。轮播应该就是这样工作的。我不确定如何更改我的代码来执行此操作。

jQuery(document).ready(function($) {
  $('.next-tab').click(function() {
    // get current tab
    var currentTab = $(".tab.active");

    // get the next tab, if there is one
    var newTab = currentTab.next();

    // at the end, so go to the first one
    if (newTab.length === 0) {
      newTab = $(".tab").first();
    }

    currentTab.removeClass('active');
    // add active to new tab
    newTab.addClass('active');
  });

  $('.prev-tab').click(function() {
    // get current tab
    var currentTab = $(".tab.active");

    // get the previous tab, if there is one
    var newTab = currentTab.prev();

    // at the start, so go to the last one
    if (newTab.length === 0) {
      newTab = $(".tab").last();
    }

    currentTab.removeClass('active');
    // add active to new tab
    newTab.addClass('active');
  });
});

.active {
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="next-tab">next</a>
<a href="#" class="prev-tab">prev</a>

<div class="tabs">

  <a href="#" class="tab new-messages">Messages</a>
  <a href="#" class="tab statistics active">Stats</a>
  <a href="#" class="tab shop">Shop</a>

</div>

Answer 1

除了使用 active 类来查找当前事件的选项卡之外，您还可以使用对选项卡数组的索引。索引让您可以使用模运算计算转盘的移动。

假设事件标签位于 currentIndex，标签总数为 numTotal。此计算将索引向左移动:

currentIndex = (currentIndex - 1 + numTotal) % numTotal;

右边:

currentIndex = (currentIndex + 1) % numTotal;

要一次显示有限数量的标签，请跟踪最左侧可见标签和最右侧可见标签的索引。

假设最左边可见选项卡的索引名为 left。然后你可以检查 currentIndex 的新值是否已经到 left 的左边:

if (currentIndex === (left - 1 + numTotal) % numTotal)

如果有，你应该更新left:

left = (left - 1 + numTotal) % numTotal;

您还想确保新的最左边的选项卡出现在旧的当前选项卡的左侧:

$(tabs[left]).insertBefore(currentTab);

当您环绕数组的末尾时，这很重要。例如，如果您的选项卡编号为 0 到 9，并且您从选项卡 0 向左移动，则您希望将选项卡 9 插入到选项卡 0 的左侧。

然后让最左边的新标签可见，隐藏最右边的旧标签并更新右边的索引:

$(tabs[left]).css('display', 'inline');
$(tabs[right]).css('display', 'none');
right = (right - 1 + numTotal) % numTotal;

当您将事件标签向右移动时，您必须执行类似的操作。以正确的顺序做所有事情很棘手，所以我制作了以下代码片段来演示它是如何完成的。

$(document).ready(function() {
  var tabs = $('.tab'),                       // Make an array of tabs.
      numTotal = tabs.length,
      numVisible = Math.min(numTotal, 5),
      currentIndex = 0,
      currentTab = tabs[currentIndex],
      left = currentIndex,                    // Track the leftmost and
      right = currentIndex + numVisible - 1;  // rightmost visible tabs.
  
  $(tabs).each(function (index, tab) {        // Let each tab update
    $(tab).click(function () {                // currentIndex to point
      $(currentTab).removeClass('active');    // to itself when clicked.
      currentTab = tabs[currentIndex = index];
      $(currentTab).addClass('active');
    });
  });
  $(tabs).css('display', 'none');             // Hide all tabs.
  for (var i = left; i <= right; ++i) {
    $(tabs[i]).css('display', 'inline');      // Show visible tabs.
  }
  $(currentTab).addClass('active');
  
  $('#prevButton').click(function () {
    $(currentTab).removeClass('active');
    currentIndex = (currentIndex - 1 + numTotal) % numTotal;
    if (currentIndex === (left - 1 + numTotal) % numTotal) {
      // Shift visible span to the left.
      left = (left - 1 + numTotal) % numTotal;
      $(tabs[left]).insertBefore(currentTab); // Ensure we wrap around.
      $(tabs[left]).css('display', 'inline');
      $(tabs[right]).css('display', 'none');
      right = (right - 1 + numTotal) % numTotal;
    }
    currentTab = tabs[currentIndex];
    $(currentTab).addClass('active');
  });

  $('#nextButton').click(function() {
    $(currentTab).removeClass('active');
    currentIndex = (currentIndex + 1) % numTotal;
    if (currentIndex === (right + 1) % numTotal) {
      // Shift visible span to the right.
      $(tabs[left]).css('display', 'none');
      left = (left + 1) % numTotal;
      right = (right + 1) % numTotal;
      $(tabs[right]).css('display', 'inline');
      $(tabs[right]).insertAfter(currentTab); // Ensure we wrap around.
    }
    currentTab = tabs[currentIndex];
    $(currentTab).addClass('active');
  });
});

body {
  font-family: sans-serif;
}
#buttons, #tabs {
  padding: 10px;
  margin: 10px;
}
a {
  text-decoration: none;
}
#buttons a {
  color: #444;
  background: #fff;
  border: 2px solid #444;
  border-radius: 5px;
  padding: 5px 10px;
}
#tabs a {
  color: #fff;
  background: #0090ad;
  border-radius: 6px 6px 0 0;
  padding: 8px 15px;
  margin: 0 2px;
}
#tabs a.active {
  background: #2c4fad;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="buttons">
  <a href="#" id="prevButton">prev</a>
  <a href="#" id="nextButton">next</a>
</div>

<div id="tabs">
  <a href="#" class="tab" id="tab0"> Tab 0 </a>
  <a href="#" class="tab" id="tab1"> Tab 1 </a>
  <a href="#" class="tab" id="tab2"> Tab 2 </a>
  <a href="#" class="tab" id="tab3"> Tab 3 </a>
  <a href="#" class="tab" id="tab4"> Tab 4 </a>
  <a href="#" class="tab" id="tab5"> Tab 5 </a>
  <a href="#" class="tab" id="tab6"> Tab 6 </a>
  <a href="#" class="tab" id="tab7"> Tab 7 </a>
  <a href="#" class="tab" id="tab8"> Tab 8 </a>
  <a href="#" class="tab" id="tab9"> Tab 9 </a>
</div>