Javascript 从堆栈交换图像的最佳方法：src、可见性、z索引。。。还有别的吗？

我有60张照片。我想一次显示一个图像，当用户平移时，它将根据平移方向显示下一个或上一个图像。 简单的例子来解释我的想法：

目前，我将所有图像加载并附加到DOM中（

img

html标记…可能css

background image

在我的情况下更好），并使用

visibility

属性：hidden/visible在它们之间进行交换。 很好用

第二个选项：与之前相同，但我使用

z-index

将所需图像置于前景

第三个选项：只有一个图像，我交换

src

属性

编辑1：图像将全屏显示，并且为720p

---

编辑2：在开始时加载60个图像并不是一个真正的问题。。。如果我想要更多的图像，我会根据需要加载它们。

也许第一个选项更好。但是关于性能问题，与其一次加载每个图像，不如只加载第一个图像。平移事件加载下一个图像包，依此类推。

我会将所有图像绝对放置在一个容器中。z索引为1的每个图像（第一个图像除外）都具有类

top

。

top

类具有

z索引：2

在jQuery中，当您使用class

top

单击img时，它会删除该类，找到下一个元素并将

top

类添加到该类中，每次单击都会使下一个图像可见

---

交换src或背景图像需要在每次单击时进一步加载。加载所有内容，并使用z-index进行相应的显示。

为什么不使用可见性、显示、可见性或z-index方法：这会降低页面加载速度，因为将同时加载60幅图像

我尝试了以下方法，它对单击有效，尽管只是在一个方向上（您也可以添加按钮“后退”和“前进”）：

---

现在您只需将名为“1.png，2.png，3.png，…，60.png”的图像放入文件夹

Z-index

比

可见性

慢得多

如果要浏览一堆图像（数百张720p图像），请选择“隐藏/可见”

---

我想知道为什么这么难

这听起来更像是一个问题，因为我不知道codereview，谢谢。。。请随时请求关闭，如果这对stackexchange最有利，我将重新定位。我不介意在开始时加载，我将使用progressbar或其他工具来处理。有关加载，请参阅我的编辑2。“也许”有点轻，但是谢谢。谢谢你的顶级jquery。。。我不知道。但我希望有更多的控制权（例如n到n+2）。我知道最好全部加载，但为什么z-index比visibility更重要呢？您可以轻松地转到jQuery中的next或nextnext。我只想到了z指数，因为这样会有一个很小的机会出现可见的毛刺。假设您使用了可见性，那么在下一个可见性变为可见之前，可见的可见性会消失吗？您有一个短暂的空白区域。如果在隐藏最后一个图像之前将其编码为“可见”，则同时会有两个可见图像，并且必须编码以确保正确选择要隐藏的旧图像，而不是新可见的图像。使用z-index似乎更简单：）我将这个答案从“接受”改为“不接受”，因为一开始它可以工作，但当你在z-index交换上加载（数百个720p图像）时，它会变得非常慢。能见度才是出路。

<img id="img" onmouseup="toggle()" scr="1.png" style="border-style:solid;padding:3px;border-width:1px;" />

var i = 1;

function toggle() {
  i++;
  if(i==61) i = 1;
  document.getElementById('img').src = i+".png";
}