为jQuery内容滑块添加自动化

Question

我正在寻找一些帮助来实现此链接到的脚本的计时器。

现在，它在将列表悬停在右侧时切换不同的幻灯片，但我希望滑块在一段时间后自动跳到下一张幻灯片，直到达到结尾，然后返回到顶端。

但是，它也需要像现在这样工作，以便您可以通过悬停进行切换，并且当您停止悬停时，应该记住位置并跳到下一个项目。

我意识到这是很多要求，但一些指针会很好，非常感谢！

DEMO：http://jsbin.com/acorah

Answer 1

您的代码正在有点性能损失与each()循环，我不认为你需要的。您在循环中绑定事件，并通过在bind()范围内声明您的操作来限制您的可能性。你希望能够在任何对象上调用事件，而不仅仅是一个元素; $('.cn_item')你的情况。

想法是跟踪您的当前幻灯片与一个类，让我们说.cur。
然后，您创建一个对象，在其中声明所有方法。主要的方法或行动是getCur()和goTo()，其他大部分都会使用这些。即。 next()仅仅是goTo()

var actions = { 
    getCur: function(){ return idx; }, 
    goTo: function(idx){ 
     // The simplest case 
     $slides.hide().eq(idx).show(); 
    }, 
    next: function(){ this.goTo(this.getCur()+1); }, 
    prev: function(){ this.goTo(this.getCur()-1); } 
    . 
    . 
    . 
} 

快捷现在，你可以通过简单地这样呼吁的事件动作：

$slides.click(function(){ actions.goTo($(this).index()); }); 
$next.click(function(){ actions.next(); }); 

然后你就可以setInterval()添加一个计时器。

setInterval(actions.next, 1000); 

这tutorial可能的帮助。我基本上涵盖了制作滑块所涉及的所有内容。我会在今天改变一些东西，我们学习每天编写东西的新方法。