JavaScript Forum

**Guest85** · 04:05 PM

I have code that displays an image with its link but it doesn't cycle through the images. It only shows a new one upon hitting refresh. I need it cycle as well.

Code:

<script language="JavaScript">
function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="../new/images/cc/random_images/4719lr.jpg"
myimages[2]="../new/images/cc/random_images/6754lr.jpg"
myimages[3]="../new/images/cc/random_images/71HHGlr.jpg"
 
//specify corresponding links below
var imagelinks=new Array()
imagelinks[1]="http://www.link1.com"
imagelinks[2]="http://www.link2.com"
imagelinks[3]="http://www.link3.com"
 
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}
//-->
</script>

<script language="javascript">
random_imglink()
</script>

Here's a different one that does what I want it to do with the cycling of images but I'm not sure how to add the hyperlinks to the function. I've tried a couple of ways but can't figure it out.

Code:

<script language="JavaScript">
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1500;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("../new/images/cc/random_images/4719lr.jpg");
image_list[image_index++] = new imageItem("../new/images/cc/random_images/6754lr.jpg");
image_list[image_index++] = new imageItem("../new/images/cc/random_images/71HHGlr.jpg");

var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
</script>

<script language="javascript">
<img name="rImage" src="../new/images/cc/random_images/ZYK3413lr.jpg">
</script>

Thanks for any help provided.

**JeremyMiller** · 10-22-2008, 04:30 AM

Try this:

HTML Code:

<html>
  <head>
    <script type="text/javascript">
      rotating_images = new Array();

      //Duplicate these lines here to add new images to the rotation.
      rotating_images.push(new RotatingImage('images/image1.png','page1.php'));
      rotating_images.push(new RotatingImage('images/image2.png','page2.php'));

      var active_image_delay = 3; //in seconds

      var active_image_index = 0;

      function rotateImages() {

        //Ensure routine runs only if my_images exists on the page.
        if (!document.getElementById('my_images') || rotating_images.length < 1) return;
        var new_image_code = '';

        new_image = document.createElement('IMG');
        new_image.src = rotating_images[active_image_index].image;
        new_image.border = "0";

        new_link = document.createElement('A');
        new_link.href = rotating_images[active_image_index].url;

        new_link.appendChild(new_image);


        if (document.getElementById('my_images').hasChildNodes() ) {
          while (document.getElementById('my_images').childNodes.length >= 1 ) {
            document.getElementById('my_images').removeChild(document.getElementById('my_images').firstChild );
          }
        }

        document.getElementById('my_images').appendChild(new_link);

        active_image_index = (active_image_index+1)%rotating_images.length;

        setTimeout('rotateImages();',active_image_delay*1000);
      }
      function RotatingImage (image_url, url) {
        this.image = image_url;
        this.url = url;
      }
    </script>
  </head>
  <body onload="rotateImages();">
  <div id="my_images"></div>
  </body>
</html>

**Guest85** · 10-22-2008, 01:07 PM

That works but the images rotate in order. Can they be random like before using this script?

**JeremyMiller** · 10-23-2008, 01:33 AM

Change

HTML Code:

active_image_index = (active_image_index+1)%rotating_images.length;

to

HTML Code:

active_image_index = Math.round(Math.random()*(rotating_images.length-1));