实现旋转木马幻灯片的智能方式

时间:2012-06-29 10:51:51

标签: slideshow carousel

我正在使用Jquery为图像创建自己的轮播幻灯片。 目前我有一个div作为视口溢出:隐形;在里面,我有一个veeery long div,所有不同的图像彼此相邻。

这意味着div可能有几千像素宽。我想知道如果这可能是一个问题。

我想以独立方式加载所有图像并仅在需要时移动它们而不是移动整组幻灯片。

您认为实现高性能和轻量化的良好解决方案是什么?

谢谢

1 个答案:

答案 0 :(得分:1)

在某些设备上滚动长位图或图层会导致视觉撕裂效果,如果我自己开始这样的项目 - 完成起来会更棘手 - 但使用单独控制的div会好得多。

根据您要实现的目标,通常只需使用您独立控制的两个div (可能三个)。您需要的只是继续将下一张图像加载到视口外“隐藏”的div中,然后在滑出当前可见的视频时将其滑入到位。

从优化的角度来看,上述是一种更好的方法,也可以灵活地实现你可以实现的过渡效果(即滑动或淡化等)。我还建议您将图像列表存储为 JS Array (并在将每个图像插入HTML Dom之前预先加载)或者作为 HTML / LI 列表在图像上(已经由浏览器预先加载)。

以下是一个很好的例子:

http://jquery.malsup.com/cycle/