如何让我的 javascript 函数随机 select 一个函数(幻灯片),执行它,然后重复?
How can I get my javascript function randomly select one function(slideshow), execute it, then repeat?
我有一个 javascript 代码,用于替换其中包含图像的 html <div>
,因此它变得像幻灯片放映一样。我在页面上有六个这样的幻灯片,我需要它们随机更改可能切换图像 3 然后 6 然后 2 等等。
$(document).ready(function(){
SlideShow6();
});
function SlideShow6() {
$('#slideshow6 > div:gt(0)').hide();
setInterval(function () {
$('#slideshow6 > div:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('#slideshow6');
}, 0000);
}
最后这里的时间是 0000
(0) 秒。因为我需要计时器在选择要滑动的随机幻灯片之前暂停 2000
(2) 秒。我用这个尝试了我的脚本:
var funcs = [];
funcs[0] = function() {
$('#slideshow6 > div:gt(0)').hide();
setInterval(function () {
$('#slideshow6 > div:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('#slideshow6');
}, 0000);
}
funcs[1] = function() {
$('#slideshow5 > div:gt(0)').hide();
setInterval(function () {
$('#slideshow5 > div:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('#slideshow5');
}, 0000);
}
// 以此类推六次...
那么...
$(document).ready(function(){
var rand = parseInt(Math.random()*funcs.length);
funcs[rand]();
setTimeout(arguments.callee, 2000);
});
它变得非常奇怪,它随机选择我的函数,但它执行幻灯片放映的次数不受限制,不久之后所有六个都在继续。也许是因为 0000
?我需要他们一张一张地切换图像。
------------更新------------
我不确定从上面的代码是否可以理解,但是 SlideShow6
函数每次使用不同的 funcs[1]
数字重复 6 次,以便它可以将所有 6 张图像的幻灯片添加到 funcs[]
数组。
我是 JavaScript 的新手,但用文字来说,这就是我想象代码的方式:
需要做一个数组所以我把所有这些函数都放进去
var funcs = [];
funcs[0] = function() {
$('#slideshow1 > div:gt(0)').hide();
setInterval(function () {
$('#slideshow1 > div:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('#slideshow1');
}, 0000);
}
funcs[1] = function() {
**All the same except number slideshow1 changes to 2,3,4,5, and 6**
}
funcs[2] = function() {
}
funcs[3] = function() {
}
funcs[4] = function() {
}
funcs[5] = function() {
}
然后你需要调用它,所以制作一个数学函数,随机选择 1-6,无论选择哪个数字,然后函数运行一次。然后在 2 秒内随机选择另一个数字。另一张图片幻灯片发生变化。就是这样,永远每 2 秒一次。谢谢。
所有测试都在 Chrome 控制台中完成:
将setInterval
的第二个参数设置为0
会使函数运行无限次。我不知道为什么 - 我希望该函数立即简单地 运行 一次。
您可以通过以下操作在您的控制台中看到它:
setInterval(function () {
console.log('Crazy');
}, 0000);
(此 post 有一些迭代,为了简洁起见,我已将其删除,因为它们被问题 OP 视为 non-sufficient。)
更新二:
var funcs = [];
funcs[0] = function() {
$('#slideshow6 > div:gt(0)').hide();
$('#slideshow6 > div:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('#slideshow6');
}
funcs[1] = ...;
funcs[2] = ...;
funcs[3] = ...;
funcs[4] = ...;
funcs[5] = ...;
$(document).ready(function() {
window.setInterval(function() {
var rand = Math.floor(Math.random() * funcs.length);
funcs[rand]();
}, 2000);
});
我认为这是一个更优雅的解决方案。这是做什么的:永远循环。每次循环迭代,等待2秒,然后随机切换一张图片。
我有一个 javascript 代码,用于替换其中包含图像的 html <div>
,因此它变得像幻灯片放映一样。我在页面上有六个这样的幻灯片,我需要它们随机更改可能切换图像 3 然后 6 然后 2 等等。
$(document).ready(function(){
SlideShow6();
});
function SlideShow6() {
$('#slideshow6 > div:gt(0)').hide();
setInterval(function () {
$('#slideshow6 > div:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('#slideshow6');
}, 0000);
}
最后这里的时间是 0000
(0) 秒。因为我需要计时器在选择要滑动的随机幻灯片之前暂停 2000
(2) 秒。我用这个尝试了我的脚本:
var funcs = [];
funcs[0] = function() {
$('#slideshow6 > div:gt(0)').hide();
setInterval(function () {
$('#slideshow6 > div:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('#slideshow6');
}, 0000);
}
funcs[1] = function() {
$('#slideshow5 > div:gt(0)').hide();
setInterval(function () {
$('#slideshow5 > div:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('#slideshow5');
}, 0000);
}
// 以此类推六次... 那么...
$(document).ready(function(){
var rand = parseInt(Math.random()*funcs.length);
funcs[rand]();
setTimeout(arguments.callee, 2000);
});
它变得非常奇怪,它随机选择我的函数,但它执行幻灯片放映的次数不受限制,不久之后所有六个都在继续。也许是因为 0000
?我需要他们一张一张地切换图像。
------------更新------------
我不确定从上面的代码是否可以理解,但是 SlideShow6
函数每次使用不同的 funcs[1]
数字重复 6 次,以便它可以将所有 6 张图像的幻灯片添加到 funcs[]
数组。
我是 JavaScript 的新手,但用文字来说,这就是我想象代码的方式:
需要做一个数组所以我把所有这些函数都放进去
var funcs = [];
funcs[0] = function() {
$('#slideshow1 > div:gt(0)').hide();
setInterval(function () {
$('#slideshow1 > div:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('#slideshow1');
}, 0000);
}
funcs[1] = function() {
**All the same except number slideshow1 changes to 2,3,4,5, and 6**
}
funcs[2] = function() {
}
funcs[3] = function() {
}
funcs[4] = function() {
}
funcs[5] = function() {
}
然后你需要调用它,所以制作一个数学函数,随机选择 1-6,无论选择哪个数字,然后函数运行一次。然后在 2 秒内随机选择另一个数字。另一张图片幻灯片发生变化。就是这样,永远每 2 秒一次。谢谢。
所有测试都在 Chrome 控制台中完成:
将setInterval
的第二个参数设置为0
会使函数运行无限次。我不知道为什么 - 我希望该函数立即简单地 运行 一次。
您可以通过以下操作在您的控制台中看到它:
setInterval(function () {
console.log('Crazy');
}, 0000);
(此 post 有一些迭代,为了简洁起见,我已将其删除,因为它们被问题 OP 视为 non-sufficient。)
更新二:
var funcs = [];
funcs[0] = function() {
$('#slideshow6 > div:gt(0)').hide();
$('#slideshow6 > div:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('#slideshow6');
}
funcs[1] = ...;
funcs[2] = ...;
funcs[3] = ...;
funcs[4] = ...;
funcs[5] = ...;
$(document).ready(function() {
window.setInterval(function() {
var rand = Math.floor(Math.random() * funcs.length);
funcs[rand]();
}, 2000);
});
我认为这是一个更优雅的解决方案。这是做什么的:永远循环。每次循环迭代,等待2秒,然后随机切换一张图片。