Skip to main content

Rotation of image like ad banner

2 replies [Last post]
sanjeev's picture
Offline
Joined: 21 Feb 2011

Hi folks! Wink
Well this morning i was thinking how this images are getting rotated at a particular interval of time. I tried to search on net and found JavaScript is the culprit behind all this fancy stuffs. As i am learning JavaScript these days, so thought to try a hand on it too.

Step 1: JavaScript code:

Code:
  1. // Sanjeev Jaiswal at Alien Coders
  2.  
  3. window.onload = rotate; //While loading page call rotate function
  4. var thisImage=0;
  5.  
  6. function rotate(){
  7. //put the images in images folder and this script outside of it but both should be in same directory.
  8. var photos = new Array("images/vistaLogo.JPG","images/wordpressLogo.JPG","images/drupalLogo.JPG","images/joomlaLogo.JPG");
  9. thisImage++; //counter which will be used in photos array in assigning image src
  10. // if counter's length becomes equal to our array's length i.e .4 in this case then make it 0 again.
  11. if(thisImage == photos.length){
  12. thisImage=0;
  13. }
  14. document.getElementById("adBanner").src = photos[thisImage]; //src of <img> tag is being assigned from our array called photos
  15. setTimeout (rotate, 2000); //rotation os image is due to this function at every 2000 milli seconds i.e 2 seconds
  16. }

save it as rotation.js (you can save it by any name)

Step 2:HTML coding


Code:
  1. <head>
  2. <title> Rotation of Banner </title>
  3. <script src="rotation.js" type="text/javascript"> </script>
  4. </head>
  5. <body bgcolor="black">
  6. <div align="center">
  7. <img src = "images/vistaLogo.jpg" id="adBanner" alt="Image Rotation Demo" height ="150px" width = "150px" />
  8. </div>
  9. </body>
  10. </html>

save it as rotation.html (again this is for my convention, you can save it as anything.html)
Code is self explanatory, but still if someone needs further clarification, can shoot the doubts here  devlish and winky smile

Happy Alien Coding! 

Follow us at :
Facebook | Twitter
########### Give me the right place to stand, I shall move the earth. #################

Offline
Joined: 22 Feb 2011
wow nice code, its easy to understand and use too

waw nice code, its easy to understand and use.
keep it up dude..
I did copy and paste your code and it was working fine..

sanjeev's picture
Offline
Joined: 21 Feb 2011
Thank you Santosh

Thanks buddy, will try to do some more experiment and will expose my code here, so that i can get right review on that.

Do you have any idea, that how Image rotation can be made more effective, like what we see in flash images.
One image will start fading and other image will start glowing something like that

Follow us at :
Facebook | Twitter
########### Give me the right place to stand, I shall move the earth. #################

Post new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.