javascript - 使用jQuery模拟下一个按钮点击

Question

不确定这是否可行，但我的网站上有一个幻灯片，当单击一个按钮时，相关幻灯片就会滑入。

我想要做的是添加一个计时器，以便在 3 秒后单击下一个按钮，使我的幻灯片自动播放。

$('#button a').click(function(){
    var integer = $(this).attr('rel');
    $('#myslide .cover').animate({left:-720*(parseInt(integer)-1)})  /*----- Width of div mystuff (here 160) ------ */
    $('#button a').each(function(){
    $(this).removeClass('active');
        if($(this).hasClass('button'+integer)){
            $(this).addClass('active')}
    });


});

---

我添加了一个 fiddle ... http://jsfiddle.net/5jVtK/

Answer 1

最简单的方法是使用 setTimeout(延迟后发生一次)或 setInterval(每隔一段时间发生一次)。

setTimeout( function() { $( '#button a' ).trigger( 'click' ) }, 3000 );

setInterval( function() { $( '#button a' ).trigger( 'click' ) }, 3000 );

一旦你实现了这个，你可能想要考虑一些其他的细节，比如当用户的鼠标悬停在下一个按钮或幻灯片上时停止自动前进(因为这意味着对当前显示的内容感兴趣)和在鼠标移出时恢复自动前进。

下一步:听起来您需要弄清楚如何动态地找到正确的按钮来触发以在多张幻灯片中继续前进。这是一种方法:

`

function click() {
    // Find the button for the next slide in relationship to the currently active button
    var $next = $( '#button' ).find( '.active' ).next( 'a' );

    // If there isn't one, go to the beginning
    if ( ! $next.length ) {
        $next = $( '#button' ).find( 'a' ).first();
    }

    // Trigger the click
    $next.trigger( 'click' );

    setTimeout(click, 3000);
}

setTimeout(click, 3000);

这是一个 fiddle 的链接，显示了这个 Action :

http://jsfiddle.net/5jVtK/1/