jQuery - 使非滑动元素侦听“幻灯片”事件

Question

我正在构建的页面上有一个jQuery UI滑块。它正在控制一种幻灯片放映。

我希望幻灯片放映中的每个元素都能听到滑块的滑动事件。在事件发生时，每个元素将评估它自己的位置，确定它是否在幻灯片放映的可视区域。如果是，它将加载它自己的图像，然后删除它的幻灯片事件的监听器。

目标是让每个元素管理自己的图像加载。有没有办法在jQuery中实现这个目标？

Answer 1

我喜欢使用jQuery的自定义事件来设置这样的监听器。

以下是一个示例：http://www.spookandpuff.com/examples/SliderPublishEvents.html

基本上，您将自定义事件处理程序绑定到每个幻灯片（在我的示例中称为“update”），它执行您需要的任何逻辑（确定位置，加载图像等）。对于每张幻灯片，您都可以触发事件，如下所示：$(slide).trigger('update')。

要更新所有幻灯片，您可以将事件绑定到滑块本身（或所有幻灯片的任何容器）。在我的例子中，这称为'刷新'。所有这一切都会触发所有幻灯片上的“更新”事件：

slider.bind('refresh', function(event, position){
    slides.trigger('update', [position]);
});

[position]参​​数用于获取滑块的位置，该位置可从jQuery中的“slide”事件获得。 （它被设置为单项数组，因为jQuery处理这些数据的方式 - 它有点像kludge）。

因此，当您设置滑块时，请按以下方式分配回调：

$('#slider').slider({
    slide:function(event, ui){
        slider.trigger('update', [ui.value]);
    }
});

然后，只需将每张幻灯片的逻辑放入幻灯片本身的刷新事件处理程序中即可。你还需要帮助吗？