By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,054 Members | 1,635 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > javascript / ajax / dhtml > questions > setting a random time interval for a slideshow?
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,054 IT Pros & Developers. It's quick & easy.

setting a random time interval for a slideshow?

P: 12
hi,

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(){
  2.  
  3.     setInterval("plantPick('plant1')", plantTimer());
  4.  
  5. }
  6.  
  7. function plantTimer() {
  8.  
  9.     var plantNum = (Math.random()*4000) + 1000;
  10.     return(plantNum);
  11.  
  12. }
  13.  
  14. //this function works fine:
  15. function plantPick(myFoo){
  16.  
  17.  var plantChoices=["images/p1.jpg","images/p2.jpg","images/p3.jpg"];
  18.  
  19.  document.getElementById(myFoo).style.backgroundImage = "url(" + plantChoices[ Math.floor(Math.random()*plantChoices.length) ] + ")";
  20. }
Aug 14 '07 #1
Share this Question
Share on Google+
6 Replies
pbmods
Expert 5K+
P: 5,821
Heya, Steve.

Instead of setInterval(), use setTimeout():
Expand|Select|Wrap|Line Numbers
  1. function allPlantPick(){
  2.  
  3.     setTimeout(
  4.         function()
  5.         {
  6.             plantPick('plant1');
  7.             allPlantPick();
  8.         },
  9.         plantTimer()
  10.     );
  11. }
  12.  
Aug 14 '07 #2
P: 12
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.       }
  27.  
  28. function plantTimer() {
  29.  
  30.     var plantNum = (Math.random()*4000) + 1000;
  31.  
  32.     return(plantNum);
  33.  
  34. }
  35.  
  36. //this function works fine:
  37.  
  38. function plantPick(myFoo){
  39.  
  40.  var plantChoices=["images/p1.jpg","images/p2.jpg","images/p3.jpg"];
  41.  
  42.  document.getElementById(myFoo).style.backgroundIma  ge = "url(" + plantChoices[ Math.floor(Math.random()*plantChoices.length) ] + ")";
  43.  
Aug 14 '07 #3
P: 12
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,

Steve
Aug 14 '07 #4
pbmods
Expert 5K+
P: 5,821
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. }
  12.  
  13. for(var i = 1; i < 4; ++i)
  14. {
  15.     allPlantPick('plant' + i);
  16. }
  17.  
Aug 14 '07 #5
P: 12
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;
  2.  
  3. function pStopGo() {
  4.  
  5.     if (q == 1) {
  6.         stopPlant();
  7.         q = 2;
  8.     }
  9.     else if (q == 2) {
  10.         goPlant();
  11.         q = 1;
  12.     }
  13.  
  14. function stopPlant(){
  15.     window.clearTimeout(startStop);
  16. }
  17.  
  18. function goPlant(){
  19.     allPlantPick();
  20. }
  21.  
  22. } 
Aug 14 '07 #6
pbmods
Expert 5K+
P: 5,821
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 = {};
  2.  
  3. function allPlantPick(plantId)
  4. {
  5.     activeTransitions[plantId] = setTimeout(
  6.               function()
  7.               {
  8.                   plantPick(plantId);
  9.                   allPlantPick(plantId);
  10.               },
  11.               plantTimer()
  12.           );
  13. }
  14.  
So to stop a particular timeout from firing:
Expand|Select|Wrap|Line Numbers
  1. clearTimeout(activeTransitions['plant2'];
  2.  
Or to stop all three:
Expand|Select|Wrap|Line Numbers
  1. for(plantid in activeTransitions)
  2. {
  3.     clearTimeout(activeTransitions[plantid];
  4. }
  5.  
Aug 14 '07 #7

Post your reply

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

Question stats

  • viewed: 4991
  • replies: 6
  • date asked: Aug 14 '07
BYTES.COM © 2019 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | JavaScript / Ajax / DHTML Answers Sitemap | JavaScript / Ajax / DHTML Insights Sitemap

Follow us to get the Latest Bytes Updates