我正在使用 Jquery 为图像创建自己的轮播幻灯片。目前我有一个 div 作为视口溢出：不可见；在里面，我有一个非常长的 div，所有不同的图像彼此相邻。
这意味着 div 可能有几千个像素宽。我想知道如果这可能是一个问题怎么办。
我想单独加载所有图像并仅在需要时移动它们，而不是移动整组幻灯片。
您认为什么是实现高性能和轻量化的好解决方案？
谢谢
问问题
650 次
1 回答
1
在某些设备上，滚动长位图或图层可能会导致视觉撕裂效果，如果我要自己开始这样的项目 - 完成起来更加棘手 - 但使用单独控制的 div 要好得多。
根据您要实现的目标，您通常只需要使用您独立控制的两个 div（可能是三个）。您需要做的就是继续将下一个图像加载到“隐藏”在视口之外的 div 中，然后在滑出当前可见的图像时将其滑入到位。
从优化的角度来看，上述方法是一种更好的方法，而且您可以实现各种过渡效果（即幻灯片或淡入淡出等）的灵活性。我还建议您将图像列表存储为JS 数组（并在将其插入 HTML Dom 之前预加载每个图像）或作为图像上的HTML/LI列表（浏览器已经预加载）。
一个很好的例子如下：
于 2012-06-29T11:06:37.860 回答