jQuery.SerialScroll 的水平滚动条如何与滑块内容同步？答案

【问题标题】：How to synchronize the horizontal scroll bar of jQuery.SerialScroll with the slider contents?jQuery.SerialScroll 的水平滚动条如何与滑块内容同步？
【发布时间】：2011-08-06 10:17:21
【问题描述】：

我在我的网页上使用 jquery SerialScroll 来滑动大约 20 张图像，它工作得非常好。现在我想这样做：

因为它们有 20 个要滑动的图像，所以滚动条出现在滑动图像下方（或者我可以说在滑动 div 的终点），并且这个滚动条会随着图像滑动而自动更新，所以现在我想要如果用户单击该滚动条并手动滑动滑块并将滚动条留在第 10 个图像上，然后它应该从第 10 个图像开始下一次滚动，然后继续滚动。

所以请告诉我或建议我该怎么做？

我认为可以通过检测用户是否单击滚动条并手动滚动来完成，然后我需要检测通过了多少图像然后通过触发事件再次开始滚动。

但是请在代码方面给我一些想法？

-谢谢

【问题讨论】：

为了帮助你，我需要知道 1. 有多少图像在视图中。 2. 是画廊全宽还是溢出：无。 3. 所有图片的宽度是否相同。
这里是答案：1.一次只有 1 个图像在视图中 2.pastebin.com/MZVHeGNH 3.不是所有图像都具有相同的宽度，但如果需要我的滑动 div 名称可以是“幻灯片放映” " 并且所有图像都在一个 "li " 标记中
你能在jsFiddle中建立一个画廊HTML-CSS布局吗？
你可以从这里开始：jsfiddle.net/roXon/waFXt
是的，我可以，但这需要一些时间，但我想我明白了（形成你的 3 分）你想做什么。所以我也在尝试同样的方法，希望我能成功

标签： javascript jquery scroll slider

【解决方案1】：

让我们编写我们自己的小型连续卷轴！
还有……一个不错的图片滑块：

在 mouseEnter 上停止
mouseLeave 重启
在手动滑动期间，它控制图像大部分可见（超过 50% 在屏幕上！）
从最常见的图像重新启动滑块

Gallery DEMO

【讨论】：

嘿，您的代码在 Firefox 中运行良好，但在 google chrome 中却无法运行。我认为它无法理解 mouseup 事件。您能找出原因吗？
感谢您的尝试，但我认为它仍然无法在 chrome 中运行，现在滑块也无法自动运行，您是否在 chrome 中检查过
是的，它正在工作，非常感谢，所以我需要将鼠标更改为 mouseout，我认为由于 mouseup 和滚动之间的竞争条件，mouseup 无法正常工作。非常感谢您
这是一个冲突，因为我们已经有一个“停止”画廊，同时“鼠标上移”滑块。现在给mouseout 监听器同样的效果。无论如何，Chrome 在scroll 和mouseup 的组合上都有问题。 :)
是的，但我在我的项目中以不同的方式使用您的代码，但无论如何它现在工作正常:-)