使用jQuery

Question

我正在寻找一些方法来实现带有我的标签的轮播，或者为带有轮播功能的标签编写其他代码。

我已编写代码来制作＆＃34; prev＆＃34;和＆＃34; next＆＃34;的按钮。

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

假设我有8个标签，并且我正在查看标签1到标签5，因此隐藏标签6,7,8。

当我在第5号标签上点击＆＃34; next＆＃34;按钮，我想显示标签6并隐藏标签1.这是一个旋转木马应该如何工作。我不确定如何更改我的代码来执行此操作。

＆＃13;

＆＃13;

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');
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;