Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/articles/javascript-tutorials/)
-   -   Simple Image Rotation in JavaScript (http://www.go4expert.com/articles/simple-image-rotation-javascript-t1012/)

red 11Mar2010 07:57

Re: Simple Image Rotation in JavaScript
 
This code is great! I have a quick question - well two questions.

1) Is there anyway to have my three images rotate once and then stop?

2) Can I use some Javascript so the rotation only occurs on the home page of my site and not on any subsequent pages?

Thank you!
Rachel

shiqinzhang 31Mar2010 22:04

Re: Simple Image Rotation in JavaScript
 
Hi experts,

I saw enough codes on the internet telling me how to Swap Image between images. But I want someone to tell me how to swap between images and Flash .swf files. My design was after a user clicks on a thumbnail on the top of a web page, the bigger picture below that will swap accordingly. Those bigger pictures include be both .jpg images or .swf files. Thanks a lot!!!!!

03/31/2010

dichotom 27Aug2010 11:26

Re: Simple Image Rotation in JavaScript
 
Quote:

Originally Posted by phisolophe (Post 64143)
A simplified version with just one set of images...with some URLs attached to the images...The timeout is in miliseconds...3000 = 3 seconds...

Hope this helps...

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 just wanted to thank you for this code snippet, I have been scouring for a small fast loading script that worked in all browsers (at least ie6 and above) and had the exact features of rotation and url's assigned to each one. I was looking at jquery scripts, which are awesome, but it's just too much overhead for my project. I am hand coding a site and I want: 1) no external libraries 2) small as possible overhead 3) xhtml 1.0 transitional certified

You helped me accomplish 1 and 2, here is 3:

Code:

<a id="imageurl" name="imageurl"><img src="Rotating1" id="Rotating1" border="0" alt="Rotating1" name="Rotating1" /></a>
<script language="javascript" type="text/javascript">
 
  function RotateImages(Start)
  {
      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');
      if(Start>=a.length)
          Start=0;
      b.src = a[Start];
      d.href = c[Start];
      window.setTimeout("RotateImages(" + (Start+1) + ")",3000);
  }
 
  RotateImages(0);
 
  </script>

Minor changes, I know, but if someone wants/needs xhtml 1.0 transitional there it is. I started out going for xhtml 1.0 strict, but it become to restraining (see: bitchy)
Thank you so much, I hope someone finds this useful!

dichotom 27Aug2010 11:37

Re: Simple Image Rotation in JavaScript
 
Anyone have an idea as to how to make the rotation pause on mouseover? If I find it first, I will post back..

dichotom 27Aug2010 13:36

Re: Simple Image Rotation in JavaScript
 
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.

dichotom 27Aug2010 13:38

Re: Simple Image Rotation in JavaScript
 
Change:

Code:

var currentImage = 0;
to

Code:

var currentImage = -1;
so it starts on the first image in the array.

tativitsic 16Sep2010 07:02

Re: Simple Image Rotation in JavaScript
 
How do I add a soft transition between the images?

shabbir 16Sep2010 08:41

Re: Simple Image Rotation in JavaScript
 
Quote:

Originally Posted by tativitsic (Post 72803)
How do I add a soft transition between the images?

jQuery supports all sorts of transitions. Try using it.

tativitsic 16Sep2010 09:30

Re: Simple Image Rotation in JavaScript
 
Sorry, but I'm a designer... :freak: No idea how to do that.
Can you show me an example please?

shabbir 16Sep2010 09:45

Re: Simple Image Rotation in JavaScript
 
Quote:

Originally Posted by tativitsic (Post 72809)
Sorry, but I'm a designer... :freak: No idea how to do that.
Can you show me an example please?

Check out http://leandrovieira.com/projects/jquery/lightbox/


All times are GMT +5.5. The time now is 19:11.