Question

我正在寻找一些帮助，为我正在链接的脚本实现一个计时器。

就像现在一样，当将列表向右移动时，它会切换不同的幻灯片，但我希望滑块在一定时间后自动跳到下一张幻灯片，直到它到达结尾，然后返回到顶部。

但问题是，它还需要像现在一样工作，这样你就可以通过悬停进行切换，当你停止悬停时，它应该记住位置并向前跳到下一个项目。

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

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可能有所帮助。我基本上涵盖了制作滑块所涉及的所有内容。我会改变今天的一些事情，我们每天都会学习新的编码方法。

将自动化添加到jQuery内容滑块

1 个答案: