循环jQuery插件,图像可以直观地双向滑动吗?

时间:2010-08-21 02:08:28

标签: jquery plugins jquery-plugins cycle

我正在使用此处的jQuery循环插件:http://jquery.malsup.com/cycle/

效果很好。我的客户想要一个包含图像和文本等的<div>列表,在首页上水平滑动。但是她也希望我使用上一个和下一个选项在两侧都有箭头来控制滑动面板。

这是我正在使用的jQuery插件调用:

$('#slidingpanelscontent').cycle({ 
    fx: 'scrollLeft',
    next: "#sliding_next",
    prev: "#sliding_prev",
    timeout: 6000,
    speed: 800
});

它在很大程度上起作用。单击右箭头(#sliding_next)时,当前面板向左滚动以显示下一个面板。但是,当您单击左指向箭头(#sliding_prev)时,当前面板仍会向左滚动以显示上一个图像。

换句话说,会显示正确的图像,但动画会违反直觉并导致用户相信正在显示NEXT面板,而不是移回上一个面板。

任何人都知道使用此插件克服此问题的方法吗?

2 个答案:

答案 0 :(得分:5)

使用fx:'scrollHorz'而不是fx:'scrollLeft'。 这样,动画将同时工作。 希望这有帮助:)

答案 1 :(得分:2)

我不确定循环插件是否可以完成此操作,但我最近查看了一个可以完成您想要的教程。它被称为“无限旋转木马”。

有关详细信息,请参阅此infinite carousel tutorial

编辑:您是否看过这个似乎具有您描述的功能的演示? http://jquery.malsup.com/cycle/add6.html