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

Question

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

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

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

Answer 1

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

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

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

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

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

[位置]参数旨在利用滑块的位置，这可从jQuery中的“幻灯片”事件。 （由于jQuery处理这些数据的方式，它被设置为一个单项数组 - 这是一个kludge）。

所以，当您设置滑块，分配回调，像这样：

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

然后，它只是一个把逻辑每张幻灯片成幻灯片本身的刷新事件处理程序的问题。你还需要帮助吗？