2014-09-04 57 views
1

我將以下內容用作內容滑塊,但不確定是否需要單擊按鈕才能播放幻燈片,但希望將其移開,並且幻燈片要在加載時完成?如何將自動計時器設置爲內容幻燈片?

DEMO

$(document).ready(function() { 

var height = 300, 
    width = 600, 

    tabs = 3, 

    $tabs = $('.tab'), 
    contentNum = 1, 

    delay = 2000, // time in milliseconds to pause between tabs 
    timer; 

$('.play').click(function(){ 
    var $t = $(this); 
    if ($t.hasClass('playing')) { 
     // stop 
     clearTimeout(timer); 
     $t.removeClass('playing').html('play'); 
    } else { 
     // play 
     timer = setInterval(function(){ 
      contentNum++; // change to contentNum--; to go left 
      if (contentNum > tabs){ contentNum = 1; } // loop right 
      if (contentNum < 1) { contentNum = tabs; } // loop left 
      $tabs.eq(contentNum-1).find('a').trigger('click'); 
     }, delay); 
     $t.addClass('playing').html('stop'); 
    } 
}); 

$('.main_inner').css({ 
    width: tabs * width 
}); 

$('a.tab_link').click(function() { 

    $tabs.filter('.active').removeClass('active'); 
    $(this).parent().addClass('active'); 

    // make sure contentNum is a number and not a string 
    contentNum = parseInt($(this).attr('rel'), 10); 

    $('.main_inner').animate({ 
     marginLeft: '-' + (width * contentNum - width) 
    }, 600); 

    return false; 

}); 


}); 

回答

1

沒有真正明白你的意思。

如果你wan't自動播放頁面加載和保存播放按鈕使用

$('.play').trigger('click'); 

如果您wan't到無聲自動播放/停止按鈕取代

$('.play').click(function(){ 
    // you current play/pause button code 
}); 

只需通過

// play 
setInterval(function(){ 
    contentNum++; // change to contentNum--; to go left 
    if (contentNum > tabs){ contentNum = 1; } // loop right 
    if (contentNum < 1) { contentNum = tabs; } // loop left 
    $tabs.eq(contentNum-1).find('a').trigger('click'); 
}, delay); 
+0

謝謝你,完美的工作。 – stacking 2014-09-04 13:56:49