Go4Expert - Simple Image Rotation in JavaScript

Go4Expert (http://www.go4expert.com/)

- JavaScript and AJAX (http://www.go4expert.com/forumdisplay.php?f=19)

- - Simple Image Rotation in JavaScript (http://www.go4expert.com/showthread.php?t=1012)

Re: Simple Image Rotation in JavaScript

Quote:

Originally Posted by pradeep (Post 13195)

Well, this script rotates the image at a preset timed interval, but for sliding the image, u'll need to change the position of the image using a javascript timer.
u can gradually increase the left css value, then it'll slide from left to right!

Can you please give me more details on this. I've been looking for quite a while on a simple javascript to slide a set of images (one at a time) left to right instead of rotating them.

Any help would be greatly appreciated!

Re: Simple Image Rotation in JavaScript

Thank you very much for the solution. It works great. Could you please help me to figure out how to use it in case where image comes from CSS? I tried to use an id name but it didn't work..

I was also interested how to make this script load random image instead of rotation every time the page is visited?

Thank you.

Re: Simple Image Rotation in JavaScript

Hi Guys

Can any one tell me how to link to the images when they are in:

var ImageArr1 = new Array( "pic1.jpg","pic2.jpg","pic3.jpg");

cheers

Re: Simple Image Rotation in JavaScript

Thank you for the post i was searching the same . Thank you for your post

Re: Simple Image Rotation in JavaScript

Quote:

Originally Posted by dichotom (Post 72011)

Code:

<a id="imageurl" name="imageurl"><img src="Rotating1" id="Rotating1" border="0" alt="Rotating1" name="Rotating1" onmouseover="StopRotation();" onmouseout="RotateImages();"/></a>

<script language="javascript" type="text/javascript">



  var currentImage = 0;

  function RotateImages()

  {

    var a = new Array("1.jpg","2.jpg","3.jpg", "4.jpg");

    var c = new Array("url1", "url2", "url3", "url4");

    var b = document.getElementById('Rotating1');

    var d = document.getElementById('imageurl');



    currentImage++;



    if(currentImage>= a.length)

      currentImage=0;



    b.src = a[currentImage];

    d.href = c[currentImage];



    rotator = window.setTimeout("RotateImages(" + (currentImage+1) + ")",3000);

  }



  function StopRotation()

  {

    window.clearTimeout(rotator);

  }



  RotateImages();



</script>

There we go, pauses on mouseover, and then continues to next image on mouseout. Still xhtml 1.0 trasitional certified.

This works great! Except, I don't need the url goto, just the rotating images. I'm a novice and, try as I might, I can't figure out how to exclude the url function. (When I delete what seems to me the relevant code, my images cease to rotate.) Can any kind, lovely person sort me out? Thanks!

Re: Simple Image Rotation in JavaScript

HTML Code:

<body><a id="imageurl" ><img id="Rotating1" border="0"></img></a><script language="JavaScript">     function RotateImages(Start)  {      var a = new Array("image1.jpg","image2.jpg","image3.jpg", "image4.jpg");      var c = new Array("url1", "url2", "url3", "url4");      var b = document.getElementById('Rotating1');      var d = document.getElementById('imageurl');      if(Start>=a.length)          Start=0;      b.src = a[Start];      d.href = c[Start];      window.setTimeout("RotateImages(" + (Start+1) + ")",3000);  }    RotateImages(0);    </script></body>

I have used the above code to the fullest. It works great.
I have additionally embedded the rotating images in a table.
The images are of varying sizes.
Currently all the images start on the left edge in the table.
How do I center these images in the table so that they spring out from the table center? I have used additional table code as below.

HTML Code:

</table>

</div>

<table border="1" width="350" height="200" align="center" >

<tr>

  <td>

   <p align=”center”>

<body>

ROTATING IMAGE CODE

HTML Code:

  RotateImages(0);

    </script>

</body>

</p>

</td>

</tr>

</table>

Note that <p align=”center”> does not help to center these images in the table.

Re: Simple Image Rotation in JavaScript

I'm pretty limited technically, but was able to get the simple java script, shown below, to work (thank you for sharing it, "Phisolophe").

Now, I'd like to add this functionality -
If someone clicks on whatever rotating image is being shown at the moment, they will go to a corresponding unique URL that is associated with that image. (like the rotating image on the Yahoo.com home page works).

Could anyone tell me a simple way to add this function to the script shown below? Thanks!

<a id="imageurl" ><img id="Rotating1" border="0"></img></a>
<script language="JavaScript">

function RotateImages(Start)
{
var a = new Array("image1.jpg","image2.jpg","image3.jpg", "image4.jpg");
var c = new Array("url1", "url2", "url3", "url4");
var b = document.getElementById('Rotating1');
var d = document.getElementById('imageurl');
if(Start>=a.length)
Start=0;
b.src = a[Start];
d.href = c[Start];
window.setTimeout("RotateImages(" + (Start+1) + ")",3000);
}

RotateImages(0);

</script>