473,372 Members | 1,055 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 software developers and data experts.

setting a random time interval for a slideshow?


this should be simple but its stumping me,

I am trying to make a slideshow that pulls random images at a random time interval (between 1 and 4 seconds). The images part works fine, and I can get the time function to create a random number, but that number doesnt change throughout the duration of the slideshow. I would like the duration to reset itself and changefor every picture that is displayed. Here is my code:

Expand|Select|Wrap|Line Numbers
  1. function allPlantPick(){
  3.     setInterval("plantPick('plant1')", plantTimer());
  5. }
  7. function plantTimer() {
  9.     var plantNum = (Math.random()*4000) + 1000;
  10.     return(plantNum);
  12. }
  14. //this function works fine:
  15. function plantPick(myFoo){
  17.  var plantChoices=["images/p1.jpg","images/p2.jpg","images/p3.jpg"];
  19.  document.getElementById(myFoo).style.backgroundImage = "url(" + plantChoices[ Math.floor(Math.random()*plantChoices.length) ] + ")";
  20. }
Aug 14 '07 #1
6 5535
5,821 Expert 4TB
Heya, Steve.

Instead of setInterval(), use setTimeout():
Expand|Select|Wrap|Line Numbers
  1. function allPlantPick(){
  3.     setTimeout(
  4.         function()
  5.         {
  6.             plantPick('plant1');
  7.             allPlantPick();
  8.         },
  9.         plantTimer()
  10.     );
  11. }
Aug 14 '07 #2
Hey thanks for the prompt reply,

It worked perfect. However, I forgot to mention that I want to have this random slideshow functioning simultaneously in 3 separate divs that are side by side. Each div will have random pictures and random timing. I naturally just multiplied your code by 3 and stuck it all into allPlantPick, but when I tested it, it created this crazy situation where the random timing kept speeding up until it crashed firefox! It was cool but not what I wanted. Should I be calling 3 separate functions instead of just lumping them into one??? Heres what I did:

Expand|Select|Wrap|Line Numbers
  1. function allPlantPick(){
  2.           setTimeout(
  3.               function()
  4.               {
  5.                   plantPick('plant1');
  6.                   allPlantPick();
  7.               },
  8.               plantTimer()
  9.           );
  10.           setTimeout(
  11.               function()
  12.               {
  13.                   plantPick('plant2');
  14.                   allPlantPick();
  15.               },
  16.               plantTimer()
  17.           );
  18.           setTimeout(
  19.               function()
  20.               {
  21.                   plantPick('plant3');
  22.                   allPlantPick();
  23.               },
  24.               plantTimer()
  25.           );
  26.       }
  28. function plantTimer() {
  30.     var plantNum = (Math.random()*4000) + 1000;
  32.     return(plantNum);
  34. }
  36. //this function works fine:
  38. function plantPick(myFoo){
  40.  var plantChoices=["images/p1.jpg","images/p2.jpg","images/p3.jpg"];
  42.  document.getElementById(myFoo).style.backgroundIma  ge = "url(" + plantChoices[ Math.floor(Math.random()*plantChoices.length) ] + ")";
Aug 14 '07 #3
No worries, I just put it in three separate functions and called those three separate functions and it all worked out... i am curious as to why the slide show kept speeding up though...?

Thanks again for your help,

Aug 14 '07 #4
5,821 Expert 4TB
Heya, Steve.

The reason why the timer keeps speeding up is because allPlantPick() sets up 3 timers... and *each* of those timers calls allPlantPick()... which sets up *3* more timers!

Perhaps you can see how that would be a problem... :P

Instead, consider doing this:
Expand|Select|Wrap|Line Numbers
  1. function allPlantPick(plantId)
  2. {
  3.     setTimeout(
  4.               function()
  5.               {
  6.                   plantPick(plantId);
  7.                   allPlantPick(plantId);
  8.               },
  9.               plantTimer()
  10.           );
  11. }
  13. for(var i = 1; i < 4; ++i)
  14. {
  15.     allPlantPick('plant' + i);
  16. }
Aug 14 '07 #5
ok, i get it now. and your script works totally.
not that you havent helped me out enough already, but im looking to put a user controlled stop/start option with an onclick applied to each image...

this is what i have so far... i was thinking i would throw the entire set interval into a variable (startStop), but again its tricky with 3 separate slideshows:

Expand|Select|Wrap|Line Numbers
  1. var q = 1;
  3. function pStopGo() {
  5.     if (q == 1) {
  6.         stopPlant();
  7.         q = 2;
  8.     }
  9.     else if (q == 2) {
  10.         goPlant();
  11.         q = 1;
  12.     }
  14. function stopPlant(){
  15.     window.clearTimeout(startStop);
  16. }
  18. function goPlant(){
  19.     allPlantPick();
  20. }
Aug 14 '07 #6
5,821 Expert 4TB
Heya, Steve.

Given that you will always have three separate timeouts going at the same time, you can store each one inside of a global variable:

Expand|Select|Wrap|Line Numbers
  1. var activeTransitions = {};
  3. function allPlantPick(plantId)
  4. {
  5.     activeTransitions[plantId] = setTimeout(
  6.               function()
  7.               {
  8.                   plantPick(plantId);
  9.                   allPlantPick(plantId);
  10.               },
  11.               plantTimer()
  12.           );
  13. }
So to stop a particular timeout from firing:
Expand|Select|Wrap|Line Numbers
  1. clearTimeout(activeTransitions['plant2'];
Or to stop all three:
Expand|Select|Wrap|Line Numbers
  1. for(plantid in activeTransitions)
  2. {
  3.     clearTimeout(activeTransitions[plantid];
  4. }
Aug 14 '07 #7

Sign in to post your reply or Sign up for a free account.

Similar topics

by: christian | last post by:
Hi, i'm getting no success, with my attempt displaying some pictures one after another for i.e. some seconds. null.jpg is a white site! Really thanks for any help, regards,Christian
by: Jason | last post by:
Hi, I need a way to use random numbers in c++. In my c++ project, when using the mingw compiler I used a mersenne twister that is publicly available and this did its job well. Now I have...
by: Crirus | last post by:
This is more a logical problem than a VB. I have this situation: A timer that need to tick at each 10 minutes starting on minute 15 of curent hour. But I want to calculate the next tick...
by: mikeoley | last post by:
Ok I have a Javascript slideshow working. Every image is linked to a another page in the site. Problem is...The link wont refresh to the next link once the second images rollovers in the slideshow....
by: mynameisnotbob | last post by:
How could I make a random image slideshow with the images being in a folder and not listed in the head tag? (I have over 1,000 images and do not want to list them all in my index page) ? Thanks
by: Papajo | last post by:
Hi, This script will write a random number into a document write tag, I've been trying to get it to write into a input form box outside the javascript, any help is appreciated. Thanks Joe ...
by: kp87 | last post by:
I am a little bit stuck .... I want to play a bunch of soundfiles randomly, but i want to give each soundfile a rating (say 0-100) and have the likelihood that the file be chosen be tied to its...
by: fieldfallow | last post by:
Hello all, Is there a function in the standard C library which returns a prime number which is also pseudo-random? Assuming there isn't, as it appears from the docs that I have, is there a...
by: moni | last post by:
Hi, Can anyone tell me , how I would generate random numbers, for an interval say from 15 to 450 in C. Plz lemme know. thanx..
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.