自動輪播的jQuery Tab選項卡滑動器帶有導航功能

在這篇文章中，我們將介紹一段使用jQuery編寫的自動輪播選項卡滑動器，並帶有導航功能。這個滑動器可以讓您在不同的內容選項卡之間切換，同時也支援自動輪播功能，讓選項卡自動在指定的時間間隔內切換。

HTML結構

首先，我們來看一下HTML結構。這個選項卡滑動器包含兩個主要的部分：選項卡列表和內容容器。選項卡列表包含所有的選項卡標題，而內容容器則包含對應的內容面板。

<div class="row responsive-tab-wrapper">
  <div class="col-md-3 tab-items-list">
    <ul class="resp-tabs-list">
      <li class="resp-tab-item">TAB 1</li>
      <li class="resp-tab-item">TAB 2</li>
      <li class="resp-tab-item">TAB 3</li>
    </ul>
  </div>
  <div class="col-md-9 resp-tabs-container">
    <div class="resp-tabs-container-item">
      <div class="prod-tab-content">
        <h4>TITLE TAB 1 </h4>
        <p>
          CONTENT TAB 1
        </p>
        <img src="https://source.unsplash.com/960x640/?city" alt="Image 3">
      </div>
    </div>
    <!-- 其他選項卡內容 -->
  </div>
</div>
<div class="button-wrapper">
  <div id="next-tab">Next</div>
  <div id="prev-tab">Prev</div>
</div>

CSS樣式

這個選項卡滑動器還需要一些CSS樣式來進行排版和動畫效果。這裡我們省略了CSS的部分，您可以根據自己的需求自行添加相應的樣式。

JavaScript程式碼

接下來，我們來看一下這個選項卡滑動器的JavaScript程式碼。這段程式碼使用了jQuery庫來實現選項卡的切換和自動輪播功能。

$(function () {
  // 定義一些變數
  var startItemIndex = 0;
  var tabItemContainer = ".resp-tabs-container";
  var tabItemList = $(".resp-tabs-list");
  var tabInterval;
  var tabIntervalTime = 5000; // 5秒，以毫秒為單位
  var stopOnHover = true; // 滑鼠懸停時是否停止自動輪播

  // 在內容容器前插入選項卡標題
  tabItemList.find(".resp-tab-item").each(function (index, val) {
    var itemHeading = $(this).html();
    $(tabItemContainer)
      .find(".resp-tabs-container-item")
      .eq(index)
      .before(
        '<h3 class="resp-accordion" data-listindex="' +
          index +
          '"><span class="resp-arrow"></span>' +
          itemHeading +
          "</h3>"
      );
  });

  // 點擊選項卡標題時切換選項卡
  $(tabItemContainer)
    .find(".resp-tabs-container-item h3.resp-accordion")
    .on("click", function () {
      var itemIndex = $(this).index();
      changeIndex(itemIndex);
      clearInterval(tabInterval);
      startAutoTab();
    });

  // 切換選項卡的函式
  function changeIndex(itemIndex) {
    tabItemList.find(".resp-tab-item").removeClass("resp-tab-active");
    tabItemList
      .find(".resp-tab-item:eq(" + itemIndex + ")")
      .addClass("resp-tab-active");

    if ($(window).width() < 980) {
      $(tabItemContainer).find(".resp-tabs-container-item").slideUp();
      $(tabItemContainer)
        .find(".resp-tabs-container-item:eq(" + itemIndex + ")")
        .stop()
        .slideDown();
    } else {
      $(tabItemContainer).find(".resp-tabs-container-item").hide();
      $(tabItemContainer)
        .find(".resp-tabs-container-item:eq(" + itemIndex + ")")
        .stop()
        .fadeIn();
    }

    $(tabItemContainer)
      .find("h3.resp-accordion")
      .removeClass("resp-tab-active");
    $(tabItemContainer)
      .find("h3.resp-accordion")
      .eq(itemIndex)
      .addClass("resp-tab-active");
  }

  // 啟動時顯示初始選項卡
  changeIndex(startItemIndex);

  // 點擊選項卡列表時切換選項卡
  tabItemList.find(".resp-tab-item").on("click", function () {
    var itemIndex = $(this).index();
    changeIndex(itemIndex);
    clearInterval(tabInterval);
    startAutoTab();
  });

  // 點擊"Next"按鈕時切換到下一個選項卡
  $("#next-tab").click(function () {
    var tabLeath = $(".resp-tab-item").length;
    var itemIndex =
      $(".resp-tab-active").index() < tabLeath - 1
        ? $(".resp-tab-active").index() + 1
        : 0;
    changeIndex(itemIndex);
    clearInterval(tabInterval);
    startAutoTab();
  });

  // 點擊"Prev"按鈕時切換到上一個選項卡
  $("#prev-tab").click(function () {
    var tabLeath = $(".resp-tab-item").length;
    var itemIndex =
      $(".resp-tab-active").index() <= tabLeath - 1
        ? $(".resp-tab-active").index() - 1
        : tabLeath - 1;
    changeIndex(itemIndex);
    clearInterval(tabInterval);
    startAutoTab();
  });

  // 自動輪播功能
  $(document)
    .find(tabItemContainer)
    .find("h3.resp-accordion")
    .on("click", function () {
      var itemIndex = $(this).attr("data-listindex");
      changeIndex(itemIndex);
      clearInterval(tabInterval);
      startAutoTab();
    });

  function startAutoTab() {
    tabInterval = setInterval(function () {
      var isHovered = false;
      if (stopOnHover)
        isHovered =
          $("ul.resp-tabs-list").is(":hover") ||
          $("div.resp-tabs-container").is(":hover");
      if (!isHovered) {
        var totalTabs = tabItemList.find(".resp-tab-item").length;
        if (
          totalTabs ==
          $("ul.resp-tabs-list .resp-tab-item.resp-tab-active").index() + 1
        ) {
          $(".resp-tab-item").eq(0).trigger("click");
        } else {
          $(".resp-tab-item.resp-tab-active").next().trigger("click");
        }
      }
    }, tabIntervalTime);
  }

  // 啟動自動輪播功能
  startAutoTab();
});

這段JavaScript程式碼實現了選項卡的切換和自動輪播功能。透過點擊選項卡標題或按鈕，您可以手動切換選項卡。同時，選項卡也會在每5秒鐘自動切換一次，除非滑鼠懸停在選項卡或內容面板上，此時自動輪播會暫停。

這是一個非常實用且易於使用的選項卡滑動器，適用於展示多個內容面板並增加用戶互動性的情境。您可以根據自己的需求進行修改和擴展，希望這篇文章對您有所幫助！

Demo