jquery 滑块插件建议 - 需要 1 个滑块淡出并触发另一个滑块旋转答案

【问题标题】：jquery slider plugin suggestions - need 1 slider to fade and trigger the other to rotatejquery 滑块插件建议 - 需要 1 个滑块淡出并触发另一个滑块旋转
【发布时间】：2012-02-28 15:14:41
【问题描述】：

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

我看过的一些滑块： Nivo - 'before' 和 'after change' 回调，但没有外部控制任何滑块 - 外部控制，但没有“幻灯片更改”回调轨道滑块 - “更改后”回调，但没有外部控制

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

有什么建议吗？

【问题讨论】：

标签： jquery jquery-plugins slider

【解决方案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 选项匹配。您将不得不摆弄选项和回调函数以获得您想要的确切效果。

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

【讨论】：

是的，确实如此。谢谢！循环看起来最终可能是解决方案。
另外，我没有看到 onChange 回调......之前和之后都有。我不是想念它吗？（意味着在转换期间触发的回调？）
我不确定它是否确实如此——我不知道它是否是这样构建的。如果你弄乱了 setTimeout 之类的东西，你可以制作一个 before 函数 seem 就像它在转换期间触发一样。