Question

我希望在我的页面顶部有一个大图像滑块，下方有4个相关的较小图像。当顶部图像改变时（通过淡入淡出效果），我希望底部4像旋转木马一样移动到下一个4.大图像没有导航，但点击旋转木马下一个按钮应该触发大幻灯片的更改。所以，我想知道是否有一个滑块插件，让我有2个滑块与不同的效果，但保持同步。

我看过一些滑块： Nivo - '之前'和'更改后'回调，但没有外部控制任何滑块 - 外部控制，但没有“滑动更改”回调轨道滑块 - '更改后'回调，但没有外部控制

通过外部控件我并不是指插件生成的导航按钮....我的意思是能够将事件（可能是点击）绑定到随机元素以将滑块推进到下一张幻灯片。

有什么建议吗？

Answer 1

我不能完全确定保持同步，但jQuery cycle plugin可能会让你在那里。它非常强大，具有很多效果和回调函数（例如之前，之后）。它也允许您将导航附加到链接，或者也可以创建分页链接。

至于保持同步，我认为你必须在交互时严重依赖回调函数。在加载时将各组图像一起旋转非常容易：

$('#big_image_div, #little_images_ul').cycle({
    //options go here
});

您还可以拆分周期声明：

$('#big_image_div').cycle({
    //options go here
});

$('#little_images_ul').cycle({
    //similar options go here
});

如果您想查看所有options, go here。

如果您需要它们同步，请确保timeout选项匹配。你将不得不摆弄选项和回调函数来获得你想要的确切效果。

这不是一个完整的答案，但它应该让你朝着正确的方向前进。