jquery - 将播放按钮添加到 jQuery 滑块

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() 取决于您想要做什么。

Answer 2

jsBin 演示

您只需要这个简化的 HTML：

<div id="slideshow">

   <div id="slidesContainer">     
     <div class="slide"><h2>Slide-1</h2></div>      
     <div class="slide"><h2>Slide-2</h2></div>      
     <div class="slide"><h2>Slide-3</h2></div>  
     <div class="slide"><h2>Slide-4</h2></div>    
     <div class="slide"><h2>Slide-5</h2></div>   
     <div class="slide"><h2>Slide-6</h2></div>            
  </div>
  <div id="tabsstyle">
     <ul></ul>
     <div id="play_pause"></div>
  </div>

添加+修改的CSS：

#tabsstyle li {
    float:left;
    list-style-type:none;
}

#tabsstyle li, #play_pause{
    color:#999;
    cursor:pointer;
    background:#eee url(img/MenuIcon.png) no-repeat 0 0;
    display:block;
    width:35px;
    height:20px;
    text-align:center;
    padding:8px 0;
    margin: 0 10px;
    -webkit-border-radius:4px;
    border-radius:4px;
}

#tabsstyle li.active{
    background:#cf5 url(img/MenuIcon.png) no-repeat 0 -35px;
}

#play_pause{
    position:absolute;
    line-height:16px;
    font-weight:bold;
    right:0px;
}

乐趣从这里开始：

var curr = 0;       // SET DESIRED START SLIDE
var delay = 2500;   // SET DELAY BETWEEN ANIMATIONS
var fadeTime = 700; // SET FADE TIME
var symb = [ '||' , '►' ]; // play-pause button symbols


// do not edit below this line :) //
var slides = $(".slide").length;
var inter;
    
$("#slidesContainer").css("overflow", "hidden");
$("#slidesContainer .slide").css('position','absolute').hide().eq(curr).show();


// CREATE BUTTONS /////////////////
for (i = 0; i < slides; i++){
    $("#tabsstyle ul").append('<li>'+(i+1)+'</li>');
}
$('#tabsstyle ul li').eq(curr).addClass('active'); // first tab selected on doucment ready   
// ////////////////////////////////


// OUR FUNCTIONS //////////////////  
function anim(){        
    $('#tabsstyle li').eq(curr).addClass("active").siblings().removeClass('active'); // Set active btn
    $('.slide').eq(curr).fadeIn(fadeTime).siblings().fadeOut(fadeTime); // Slides animation
}   
function stop(){
    clearInterval(interv);  // stop auto-animation
    interv = false;
    $("#play_pause").html( symb[1] );
}
function play(){
    interv = setInterval(function(){
        curr = (++curr % slides);
        anim();
    },delay+fadeTime);
    $("#play_pause").html( symb[0] );
}
// ///////////////////////////////

play(); // Start (at dom ready)
    
$("#tabsstyle").on("click", "li", function(){
    stop();                 // stop
    curr = $(this).index(); // set current slide
    anim();                 // Run 'anim' function to 'curr' slide
});
$("#play_pause").on("click", function(){
    var check= interv===false ? play() : stop();
});