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

标签 jquery

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

这就是我所拥有的for now (website of the plugin)。

现在,我希望图像每次都是随机的。假设我有 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

有人吗?

最佳答案

使用math.Random();要从数组中提供随机索引,请将其放在 while 循环中并执行此操作,直到获得不同的数字。即。

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
});

您的fiddle

编辑2:

与 OP 需求讨论后(在评论中),他们需要一个不完全随机的 slider 。需要确保在再次选择任何索引之前使用所有索引,然后在空时重置。

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

关于jquery - 使用 backstretch 插件随机背景图像幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11012078/

相关文章:

jquery - JQuery 可以像 javascript 一样调试吗?

javascript - 使用 jQuery 动态显示多个内容

jquery - 对齐可排序列表中不同表的列

javascript - 从类型 ="button"切换到 asp :LinkButton

javascript - jQuery 嵌套 Droppable

MVC View 中的 javascript 不起作用

javascript - 防止选项卡内容多次加载(backbone.js)

jquery日期选择器将包含日期时间的字符串中的日期格式设置为 'MM-DD-YYYY'

javascript - jQuery 文件上传不显示预览

Jquery AJAX 一一