自定义jquery滑块右/左箭头导致循环混乱答案

【问题标题】：custom jquery slider right/left arrows cause loop to mess up自定义jquery滑块右/左箭头导致循环混乱
【发布时间】：2011-03-03 06:23:48
【问题描述】：

我构建了这个滑块www.freewaycreative.com/jsfun/

有四张幻灯片，但第四张与第一张的图像相同（它只是坐在后面，而 2-4 滑入然后被推回隐藏位置。

我的问题出现在方向箭头上。每个左右箭头都有 4 个不同的 ID，因此它们可以出现在特定的 z 索引处，这样我就可以根据出现的箭头来区分幻灯片。当我将鼠标悬停在幻灯片上时，会出现一组特定的箭头。

当我单击箭头时，我希望它在下一张幻灯片中滑动。但它完全混淆了脚本。我基本上希望它做 nivo 滑块所做的事情。看看吧。

【问题讨论】：

标签： jquery slider

【解决方案1】：

您的链接似乎已损坏（因为我无法访问您正在解释的示例）。从它的声音来看，jQuery 画廊/轮播将是您想要做的事情的理想解决方案......看看 jCarousel - 它是一个非常灵活的内容/图像轮播，并且在您的场景中可以很好地工作。

【讨论】：

【解决方案2】：

您不需要所有这些箭头。只剩一左一右。剩下的都可以用 js 和 jquery 搞定。

这是我整理的一个简单版本：

http://jsfiddle.net/jtbowden/ZR9bM/

它并不完美，但要简单得多。您遇到的问题是每次单击箭头时，您都会通过一堆setTimeouts 开始一个新的动画循环。在开始另一个超时之前，您需要停止现有的超时。在我的脚本中，我将超时或本例中的时间间隔存储在一个变量中，然后调用 clearInterval（或 clearTimeout）来停止它。

当然，我也可以问……如果你喜欢 Nivo，为什么不直接使用 Nivo？

【讨论】：

【解决方案3】：

谢谢。我摆弄了你所做的一切并让它发挥作用。我不得不从悬停功能中删除 clearinterval 并将其添加到单击功能中，然后在单张幻灯片后重新启动自动滑块。

但是，它在摆动吗？我不想要 nivo 的原因是它不会摆动。另外，我正在努力学习编写自己的东西。但看起来我们的新滑块不再摆动了。至少没有我原来的滑块那么多。

两个版本都使用相同的功能：动画({ "left": "-=800px" }, 1000);

为什么他们的行为不同？再次感谢

链接：http://jsfiddle.net/ZR9bM/14/

【讨论】：

实际上，我检查了 jQuery UI 1.8.9，现在我认为它摇摆不定。我已经盯着它看了这么久，我什至无法分辨了。有没有一种简单的方法可以让挥杆更猛烈？
“更努力地挥杆”是什么意思？你想让它看起来像什么？顺便说一句，我在悬停时设置了 clearInterval，这样在您手动导航时它就不会滑动。如果您缓慢地点击幻灯片，如果幻灯片在您以其他方式滑动后滑回，将会很烦人。所以，只要你的鼠标在容器中，它就会暂停滑动。
P.S.更好的做法是评论或编辑您的问题，而不是添加另一个“答案”。请务必接受我的回答（或更好的回答），因为这会增加其他人回答未来问题的可能性。
似乎无法检查您的答案是否已接受。不应该有一个空白的复选标记吗？我使用缓动插件来很好地摆动幻灯片。出于某种原因，只是链接 jquery-ui 并没有使 animate() 函数摆动图像，或者它太微妙而无法注意到。这是代码 freewaycreative/jsfun/fiddle.html
我移动了 clearIntervals 以便它在鼠标悬停时暂停循环，并在鼠标悬停和单击箭头后重新启动循环。它现在可以正常工作，除非您将鼠标悬停然后鼠标移出，您必须等待 5 秒钟才能再次启动循环。也许如果我对悬停进行计时，并且如果超过五秒，则循环会在鼠标悬停时立即启动。是否可以为悬停计时？