将自动播放添加到基本的 jquery 滑块

Posted 2023-05-09

【中文标题】将自动播放添加到基本的 jquery 滑块

【英文标题】：add autoplay to basic jquery slider

【发布时间】：2012-05-10 16:37:16

【问题描述】：

我正在为类制作一个基本的 jQuery 滑块。并希望让它在 5 秒后自动播放下一张幻灯片，但在它没有做我认为应该做的事情之前没有使用计时器。它等待适当的时间间隔，然后继续触发回调函数。

//basic slider on click
$('.slider>ul>li').click(function()

    $('.slider>ul>li').removeClass('current');
    $(this).toggleClass('current');
    right=$(this).index()*745;
    $(this).parent('ul').parent('.slider').children('div').children('ul').animate('right': right, 1000, 'easeOutBack');
)

//attempt to use timer plugin to auto play
$('.slider>ul>li').timer(

        delay: 1000,
        callback: function()
        alert($('.slider>ul>li.current').index())
            if($('.slider>ul>li.current').index()!=3)
            
                $('.slider>ul>li.current').next('li').click();
            else//oddly this doesn't trigger at all
            
                $('.slider>ul').first().click();
            
        
)

【问题讨论】：

您的警报显示的数字是多少？

ocd.classelliott.com/# 是我在课堂上实施的可怕网站。

你说没有触发的else 块中的警报怎么样？我想知道你是否需要在那里做$('.slider>ul>li').first().click();，所以它实际上是找到第一个LI，而不仅仅是第一个UL。

它现在回到第一个但停止了。它仍然会触发所有这些，中间没有停顿。

定时器插件有什么作用？你能发布一个链接到它的下载页面吗？

【参考方案1】：

试试这个：

setInterval(function()
  var i = $('.slider>ul>li.current').index();
  var next = (i < 3 ? i+1 : 0);
  var items = $('.slider>ul>li');
  $(items[next]).click();
, 5000);

编辑： 将 setTimeout 更改为 setInterval 并将时间增加到 5 秒；现在应该循环了。