JavaScript : Random Image Function!

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
glenn
Forum Newbie
Posts: 18
Joined: Fri Apr 19, 2002 7:42 am
Location: London, England (UK)

JavaScript : Random Image Function!

Post by glenn »

I have and come up with a Javascript function to randomize image selection the only problem with it was that it would pick the some picture for all five pictures that are the on the page. To explain further I have the five pictures that are listed in the array displayed on the screen and wanted to randomized them! The code I have pasted below is my lastest go at trying to get around the problem but it doesn't work it still displays more than one picture of the same person!

Also I haven't try this yet but I want the function to automaticly change the pics and not on a page reload but I think that setting timers in JavaScript is went to be easy :? . I have used timers in PHP so I hope that I can use them in JavaScript but any help would be very welcome!

If it's not asking to much I would like any code pasted for help given explain to some (like me) who doesn't understand JavaScript very well.

Thank You, Glenn Curtis

My Function ::

function RandomBuffy() {
BuffyArray = new Array (
"images/home/buffy.jpg",
"images/home/xander.jpg",
"images/home/willow.jpg",
"images/home/spike.jpg",
"images/home/dawn.jpg");
RandomPic_B = Math.floor(BuffyArray.length * Math.random());
RandomPic_X = Math.floor(BuffyArray.length * Math.random());
RandomPic_W = Math.floor(BuffyArray.length * Math.random());
RandomPic_S = Math.floor(BuffyArray.length * Math.random());
RandomPic_D = Math.floor(BuffyArray.length * Math.random());

if (RandomPic_B != RandomPic_X || RandomPic_W || RandomPic_S || RandomPic_D) {
document.Buffy.src = BuffyArray[RandomPic_B]
document.Xander.src = BuffyArray[RandomPic_X]
document.Willow.src = BuffyArray[RandomPic_W]
document.Spike.src = BuffyArray[RandomPic_S]
document.Dawn.src = BuffyArray[RandomPic_D]
} else {
document.Buffy.src = "images/home/buffy.jpg";
document.Xander.src = "images/home/xander.jpg";
document.Willow.src = "images/home/willow.jpg";
document.Spike.src = "images/home/spike.jpg";
document.Dawn.src = "images/home/dawn.jpg";
}
} // End of Function RandomBuffy
Rob the R
Forum Contributor
Posts: 128
Joined: Wed Nov 06, 2002 2:25 pm
Location: Houston

Post by Rob the R »

It looks like the problem arises because the RandomPic_x values are not forced to be different. I did a Google search and found an simple algorithm that should work for you:

Code: Select all

function RandomBuffy() { 
   BuffyArray = new Array ( 
      "images/home/buffy.jpg", 
      "images/home/xander.jpg", 
      "images/home/willow.jpg", 
      "images/home/spike.jpg", 
      "images/home/dawn.jpg");

   var i=0 ;
   // variable used to contain controlled random number 
   var random ;
   // create array to hold the randmized elements
   var randomizedArray = new Array ("", "", "", "", "") ;
   // while all of array elements havent been cycled through
   while (i < BuffyArray.length) &#123;
      // generate random num between 0 and arraylength-1 
      random = Math.floor(Math.random() * BuffyArray.length) ;
      // if element hasnt been assigned already
      if (randomizedArray&#1111;random] == "") &#123;
         // assign element
         randomizedArray&#1111;random] = BuffyArray&#1111;i] ;
         i++ ;
      &#125;
   &#125;

   document.Buffy.src = randomizedArray&#1111;0] ;
   document.Xander.src = randomizedArray&#1111;1] ;
   document.Willow.src = randomizedArray&#1111;2] ;
   document.Spike.src = randomizedArray&#1111;3] ;
   document.Dawn.src = randomizedArray&#1111;4] ;
&#125;
This code was adapted from the following page:
http://www.javascriptkit.com/javatutors ... rder.shtml
Post Reply