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.