如何让我的 javascript 函数随机选择一个函数(幻灯片），执行它，然后重复

How can I get my javascript function randomly select one function(slideshow), execute it, then repeat?

本文关键字：函数 幻灯片 一个 然后 执行 我的 javascript 随机 选择      更新时间：2023-09-26

我有一个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);

（这篇文章有几个迭代，为了简洁起见，我删除了这些迭代，因为它们被问题OP认为是不够的。

更新 2：

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秒，然后切换一个随机图像。

相关文章：