使用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>