jquery - 向 jQuery slider 添加播放按钮

Question

我有以下代码，它工作得很好，但是我想为其添加一个播放和停止按钮。关于如何做到这一点有什么想法吗？

$(document).ready(function () {
   var slides = $(".slide").length;

   $("#slidesContainer").css("overflow", "hidden");

   (function () {
      for (i = 0; i < slides; i++) {
          var tabNumber = i + 1;
          $("#tabsstyle ul").append('<li><a href="#" rel="' + tabNumber + '"></a></li>')
      }
      $("#tabsstyle li a").bind("click", function () {
         $("#tabsstyle li a").removeClass("active");
         $(this).addClass("active");

         var tabNumber = "n" + $(this).attr("rel");
         $("div.slide").delay(200).fadeOut();
         $("#" + tabNumber).delay(200).fadeIn(600)
      })
   })()

   $('#tabsstyle ul li a:first').addClass('active'); // first tab selected on doucment ready    
});

Answer 1

我假设您想要的是一种启动和停止选项卡幻灯片的方法。这是一种方法。这完全未经测试，但应该能让您朝着正确的方向前进:

var intervalId;
function playTabs() {
    intervalId = setInterval("cycleTabs()", 1000);
}
function stopTabs() {
    clearInterval(intervalId);
}
function cycleTabs() {
    var currentTab = $("#tabsstyle li a.active");
    // Find the index number of the current tab by finding its position within its parent
    var currentTabNumber = $(currentTab).parent().children().index(currentTab);
    var nextTabNumber = currentTabNumber + 1;
    // if we are on the last slide then go back to the start
    if (currentTabNumber + 1 == slides) {
        nextTabNumber = 0;
    }
    $(currentTab).removeClass("active");
    $("div.slide").delay(200).fadeOut();
    $("#" + nextTabNumber).addClass("active");
    $("#" + nextTabNumber).delay(200).fadeIn(600)
}

现在只需根据您想要执行的操作让您的开始/停止按钮调用 playTabs() 或 stopTabs() 即可。