【问题标题】:Smart way to implement a carousel slideshow实现轮播幻灯片的聪明方法
【发布时间】:2012-06-29 10:51:51
【问题描述】:

我正在使用 Jquery 为图像创建自己的轮播幻灯片。 目前我有一个 div 充当具有溢出的视口:不可见;在里面我有一个非常长的 div,所有不同的图像一个挨着一个。

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

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

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

谢谢

【问题讨论】:

    标签: slideshow carousel


    【解决方案1】:

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

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

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

    一个很好的例子如下:

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

    【讨论】: