Question

I have the following code which works perfectly fine, however I would like to add a play and stop button to it. Any ideas on how to do this?

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

I’m assuming what you want is a way to start and stop a slideshow of your tabs. Here is one way. This is completely untested, but should get you in the right direction:

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

Now just have your start/stop button call playTabs() or stopTabs() depending on what you want to do.