在水平幻灯片中一次滑动3个div

Question

我正在制作一个幻灯片，在底部显示3个水平div和3个链接。 链接需要一次滑动3个div并将其替换为接下来的3个div（每次点击3个） 这是我到目前为止建立的： http://tipoos.com/buzz

我想知道我是否需要在UL列表中执行此操作或仅使用浮动div。最后决定使用div。

有谁知道我怎么能做到这一点？ 我也希望它每隔5秒左右自动滑动3个div ..

将不胜感激任何帮助 谢谢，吉尔

Answer 1

如果一个插件是合适的，那么我之前使用过：http://gmarwaha.com/jquery/jcarousellite/可以做你想做的事情

Answer 2

检查页面的以下修改：

http://jsfiddle.net/snies/B4FB5/35/

主要思想是你需要6个图像才能滚动3进3出。 他们住在1个包含“滑块”的div中，它被移动了。它必须足够宽6张图像。整个设置包含一个“slider_window”div，仅适用于3张图像。 这个将css属性“overflow”设置为“hidden”。

想象一下纸板窗口和一张带有图片的纸条，现在你沿着窗户移动纸条。

为了便于使用和动画我使用jQuery（http://api.jquery.com/animate/）。

动画完成后，您将切换图像并将整个div移回原位。如果预加载的图像开关速度足够快，则用户无法看到它。或者，您可以删除一侧的图像，并在另一侧添加新的图像。在演示中，我只需在5秒后将其移回原位。