javascript - 如何将自动定时器设置为内容幻灯片？

Question

我将以下内容用作内容 slider ，但不确定是否要单击按钮来播放幻灯片，但又想取消它并让幻灯片在加载时播放？

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;

});


});

Answer 1

不太确定你的意思。

如果您不想在页面加载时自动播放并继续使用“播放”按钮

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

---

如果你不想在没有播放/停止按钮替换的情况下自动播放

$('.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);