简体   繁体   中英

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. 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.

$(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. Becuase I need the timer to have a 2000 (2)second pause before picking a random slide to slide. 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 ? 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.

I am a newbie to JavaScript but in words this is how I image the code:

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. Then the randomize pick another number in 2 seconds. And another image slide changes. That's all it is every 2 seconds forever. Thanks.

All testing done in Chrome console:

Setting the second parameter of setInterval to 0 causes the function to be run an unlimited number of time. 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.)


Update 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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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