jquery - 使用 backstretch 插件的随机背景图像幻灯片

Question

这是交易。我正在使用一个名为 backstretch 的插件，它可以全屏显示我的背景图像并制作幻灯片。

这就是我现在所拥有的（插件网站）。

现在，我希望图像每次都是随机的。假设我有 3 张图片，就像：

2, 3, 1
3, 1, 2
1, 2, 3
1, 3, 2

在一行中，这将是：2, 3, 1, 3, 1, 2, 1, 2, 3, 1, 3, 2

注意：图像必须避免重复，例如：2, 3, 1, 1, 2, 3

任何人？

Answer 1

用于math.Random();从您的数组中提供一个随机索引，将其放置在一个 while 循环中并执行此操作，直到您获得不同的数字。IE。

oldIndex = index;
while (oldIndex == index) {
   index = Math.floor((Math.random()*images.length));
   }

编辑：要从随机图像开始，请在调用 backstretch 之前使用 random 方法

index = Math.floor((Math.random()*images.length));
$.backstretch(images[index], {
    speed: 500
});

你的小提琴

编辑2：

在与 OP 要求（在评论中）讨论之后，他们需要一个不完全随机的滑块。在再次选择其中任何一个索引之前，需要确保所有索引都已使用，然后在为空时重新设置。

通过将索引列表填充到单独的数组中，我们可以在使用它们时从数组中删除它们直到为空，然后重新填充。我们还保留了以前的索引，这样即使在重置时图像也不会重复。最终结果在这里