简体   繁体   English

我怎样才能让我的javascript函数随机选择一个函数(slideshow),执行它,然后重复执行?

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

I have a javascript code for replacing a html <div> that contains an image in it, so it becomes like a slide show. 我有一个javascript代码来替换其中包含图像的html <div> ,因此它变得像幻灯片一样。 I have six of these slideshows on the page, and I need them to randomly change maybe switch image 3 then 6 then 2 and ect. 我在页面上有六个这样的幻灯片,我需要它们随机更改,也许先切换图像,然后依次为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);
}

The time over here at the end is 0000 (0)seconds. 最后的时间是0000 (0)秒。 Becuase I need the timer to have a 2000 (2)second pause before picking a random slide to slide. 因为我需要计时器在选择随机幻灯片之前要有2000 (2)秒的暂停时间。 I tried my script with this: 我尝试使用此脚本:

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

// and so on six times... then... //等六次...然后...

$(document).ready(function(){
    var rand = parseInt(Math.random()*funcs.length);  
    funcs[rand]();
    setTimeout(arguments.callee, 2000);
});

It becomes really weird, it selects my functions randomly but it executes the slideshow a unlimited number of times and before soon all six of them are on and going. 它真的变得很奇怪,它随机选择我的功能,但是它无限次地执行幻灯片放映,并且很快所有六个功能都开始运行。 Maybe because of the 0000 ? 也许是因为0000 I need them to switch image one by one. 我需要他们一张一张地切换图像。

----------UPDATE---------- I'm not sure if it was understandable from the code above but the SlideShow6 function repeats 6 times with a different funcs[1] number every time so that it can add slideshows for all 6 images into the funcs[] array. ----------更新----------我不确定上面的代码是否可以理解,但是SlideShow6函数以不同的funcs[1]编号重复6次时间,以便可以将所有6张图片的幻灯片添加到funcs[]数组中。

I am a newbie to JavaScript but in words this is how I image the code: 我是JavaScript的新手,但是用语言来说,这就是我对代码的印象:

Need to make an array so I put all these functions into into it 需要制作一个数组,所以我将所有这些功能放入其中

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() {
}

Then you need to call it up so make a math function that chooses 1-6 randomly which ever number is chosen then that functions is played out once. 然后,您需要调用它,使数学函数随机选择1-6,无论选择哪个数字,然后该函数就会播放一次。 Then the randomize pick another number in 2 seconds. 然后在2秒内随机选择另一个数字。 And another image slide changes. 另一个图像幻灯片发生了变化。 That's all it is every 2 seconds forever. 就是每2秒钟永远存在。 Thanks. 谢谢。

All testing done in Chrome console: 在Chrome控制台中完成的所有测试:

Setting the second parameter of setInterval to 0 causes the function to be run an unlimited number of time. setInterval的第二个参数设置为0导致该函数无限次运行。 I don't know why - I would expect the function to simply run a single time immediately. 我不知道为什么-我希望该功能可以立即立即运行一次。

You can see this in your console by doing: 您可以通过执行以下操作在控制台中看到此内容:

setInterval(function () {
  console.log('Crazy');
}, 0000);

(There was a few iterations of this post which I have removed for brevity since they were deemed non-sufficient by question OP.) (为简短起见,我删除了这篇文章的一些重复内容,因为问题OP认为它们不够用。)


Update 2: 更新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);
});

I think this is a much more elegant solution. 我认为这是一个更为优雅的解决方案。 What this does: loop forever. 这是什么:永远循环。 Every loop iteration, wait 2 seconds and then switch a random image. 每次循环迭代,等待2秒钟,然后切换随机图像。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM