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/)

pradeep 15Jul2006 14:15

Simple Image Rotation in JavaScript
 
Sometimes, we need to rotate images on ours web pages, it may be ads or some simple images.Below you'll find the code for implementing the same.
You can create as many image rotations you want, you just need to specify the urls of the images in an Array, and the object where the image will be shown. The function RotateImages is called with the Array/Img Object number, and at what index of the array the rotation should start.

HTML Code:

<html>
  <head>
  <title>Image Rotate
  </head>
 
  <body>
  <img src="" name="Rotating" id="Rotating1" width=100 height=100>
  <img src="" name="Rotating" id="Rotating2" width=100 height=100>
 
 
  <script language="JavaScript">
  var ImageArr1 = new Array("Picture(3).jpg","Picture(1).jpg","Picture(2).jpg");
  var ImageHolder1 = document.getElementById('Rotating1');
 
  var ImageArr2 = new Array("Picture(5).jpg","Picture(6).jpg","Picture(7).jpg");
  var ImageHolder2 = document.getElementById('Rotating2');
 
  function RotateImages(whichHolder,Start)
  {
          var a = eval("ImageArr"+whichHolder);
          var b = eval("ImageHolder"+whichHolder);
          if(Start>=a.length)
                  Start=0;
          b.src = a[Start];
          window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",1500);
  }
 
  RotateImages(1,0);
  RotateImages(2,0);
 
  </script>
 
  </body>
  </html>

Few more Interesting JavaScript Scripts

Auto Suggest with Javascript
Hide/Show and Toggle DIV usng JavaScript
Arrays in Java script
Sorting A Un-Ordered List (UL) Using JavaScript
Timer In JavaScript

vikas 9Jun2007 10:42

Re: Simple Image Rotation in JavaScript
 
Well,this is OKay,but could you guide me how to slide the image using java script

vikas 9Jun2007 10:42

Re: Simple Image Rotation in JavaScript
 
Well,this is OKay,but could you guide me how to slide the image using java script
THANK YOU

pradeep 10Jun2007 01:25

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

vin2785 26Aug2008 17:57

Re: Simple Image Rotation in JavaScript
 
hi! quick question, i've followed this tutorial and got the images to rotate...

my javascript knowledge is quite weak...

i want each image to link to a different page...how would i go about doing this? i know you mention specifying the urls in an array but i have no idea how, as i said my javascript knowledge is weak..

Thanks in advance!

pradeep 27Aug2008 09:59

Re: Simple Image Rotation in JavaScript
 
You'll need to create a two-dimensional array in this case! Try it out and keep us posted with code snippets.

gkumar 23Jun2009 16:14

Re: Simple Image Rotation in JavaScript
 
I like simplicity, especially with code. After wasting hours trying to tweak a flashy image rotation Javascript, complete with .js files to include, I gave up, called up the Google, and found this wonderfully simple code from a throwaway response on an online forum:

Quote:

<div id=”home-photo”><img src=”living.jpg” id=”photo” alt=”"></div>

<script language=”JavaScript”>
var ImageArr1 = new Array(”living.jpg”,”trail.jpg”,”pond.jpg”);
var ImageHolder1 = document.getElementById(’photo’);

function RotateImages(whichHolder,Start)
{
var a = eval(”ImageArr”+whichHolder);
var b = eval(”ImageHolder”+whichHolder);
if(Start>=a.length)
Start=0;
b.src = a[Start];
window.setTimeout(”RotateImages(”+whichHolder+”,”+ (Start+1)+”)”,3500);
}

RotateImages(1,0);
</script>
Here’s how it works. See the div labelled “home-photo”? That wraps around the image that is to be replaced with other images. The img tag within the home-photo div has its own id=”photo” element which, no surprise, is called in the var ImageHolder1 = document.getElementById(’photo’). If you want to change the id=photo element to, say, id=xyz then you just change ‘photo’ to ‘xyz’ in the var ImageHolder1 = document.getElementById(’xyz’) line. (By the way, ‘var’ is shorthand for variable. You’re just setting a variable that grabs the element tagged id=”xyz”.)

To specify the images to rotate, just add file path and image names to the var ImageArr1 = new Array(”", “”, “”) line. Be careful to wrap each file path and image name with double quotes with a comma between each and you’ll be fine.

The last element to set is the ‘3500′ at the end of the window.setTimeout(..) line. That’s the number of milliseconds between the display of each image.

This code does not have fancy wipes, dissolves, or other whizzy features. But it doesn’t require include references to javascript files and other complexity that can go horribly wrong horribly fast. Just tweak this code and drop the Javascript part at the bottom of your web pages or templates (so it doesn’t get in the way of search bots). The image, the “home-photo” div in this example, goes where it goes in your design.

husen 1Sep2009 21:41

Re: Simple Image Rotation in JavaScript
 
Hello friends,

I was quite interesting to view those expert sharing their expertise over here.
Please help me to solve my conflict over "rotating image" issue.

I have a webpage and the header image was set in my CSS as 'header-bg.jpg'. I would like to add more than 1 image in my header, meaning that the header image will rotate one to another after few seconds.

Please help me to work on the right coding.

This is my CSS:

Code:

/* CSS Document */

* {    margin:0; padding:0; font-size:100%;}

body{ background:#01245c; text-align:center;}
.top-tail{ background:url(images/top-tail.jpg) top repeat-x #fff;}
.top-bg{ background:url(images/body-bg.jpg) top center no-repeat;}
.bot-tail{ background:url(images/bot-tail.gif) bottom repeat-x;}

img {vertical-align:top;}
a img { border:0;}
ul { list-style:none;}

.left { float:left;}
.right {float:right;}
.clear  { clear:both;}

html{ font-family:Arial, Helvetica, sans-serif; font-size:0.7275em; line-height:1.364em; color:#0e1a27;}
input, select { vertical-align:middle; font-weight:normal;}

a {color:#ffffff;}
a:hover{text-decoration:none;}
p {padding-top:15px;}
h5{ font-size:1.236em; color:#0b4f88; font-weight:bold; padding-bottom:9px;}
.strong1{ color:#28a5ce; display:block; font-size:1.091em;}
cite{ font-style:normal;}

/* ============================= main layout ====================== */
.imgindent {margin:0 15px 0 0; float:left;}
.phone{ float:right; padding-right:215px;}
.space1{ margin-left:13px;}
.space2{ margin-left:70px;}
.margin1{ margin-top:25px !important;}
.padding1{ padding-top:9px;}
.padding2{ padding-top:20px;}
.padding3{ padding-top:25px;}
.padding4{ padding-bottom:50px !important;}

/* ============================= header ====================== */
.flash{ height:178px;}
#header{ font-size:0.909em; background:url(images/header-bg.jpg) bottom left no-repeat;}
#header .banner{ display:inline-block; margin:5px 0 4px 0;}
#header .slogan{ padding:123px 0 0 335px;}

/* ============================= content ====================== */
#content{ background:url(images/content-corner-left.gif) left top no-repeat #fff; margin-top:2px;}
#content .right-corner{ background:url(images/content-corner-right.gif) right top no-repeat; padding:24px 10px 20px 24px;}
.column-2{ color:#000000; line-height:1.273em;}
.line{ background:url(images/line.gif) repeat-y 630px 0; padding-bottom:30px;}
.line2{ background:url(images/line.gif) repeat-y 630px 0; padding-bottom:60px;}
.title{ padding-bottom:11px;}
.title2{ padding-bottom:20px;}
.text{ font-size:1.071em; line-height:1.3em;}
.text p{ padding-top:18px;}
.text1{ font-size:0.909em; color:#aeaeae; font-style:italic; display:block; }

.indent1{ padding-right:20px;}
.indent2{ padding:0 10px 0 17px;}

.unline{ border-bottom:solid 1px #444546; padding-bottom:22px; margin-bottom:20px;}
.link1{ font-size:1.091em; color:#051047; font-weight:bold; display:inline-block; margin:11px 40px 0 0;}
.link2{ font-size:1.091em; color:#525252; font-weight:bold; display:inline-block; margin-top:11px;}
.link3{ color:#525252;}

.box{ background:url(images/box-tail.gif) repeat-y; margin-top:32px; border-top:solid 1px #000000; font-size:1.091em; line-height:1.333em; color:#fff;}
.box .bot-bg{ background:url(images/box-bg.gif) bottom no-repeat; padding:17px 10px 28px 17px;}
.box .title{ padding-bottom:6px;}

.list li{ font-size:1.091em; line-height:1.5em;}
.list a{ font-weight:bold; color:#525252;}
.list span{ font-size:0.917em; line-height:1.364em; color:#0e1a27;}

/* ============================= footer ====================== */
#footer{ color:#ffffff;}
#footer a{ color:#000000; font-weight:bold;}
#footer .text{ padding:17px 0 0 84px;}


khush 1Jan2010 23:35

Re: Simple Image Rotation in JavaScript
 
i wanna to link every rotating image to sum page..
Can u plz tell me how to go abt 4 dis???

phisolophe 12Feb2010 08:49

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


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/

kipfinch 6Oct2010 20:13

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!

delsian 12Nov2010 12:05

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.

alexharper 22Dec2010 20:57

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

rameshb 27Dec2010 16:58

Re: Simple Image Rotation in JavaScript
 
Thank you for the post i was searching the same . Thank you for your post

LadyAnglesey 14Nov2011 21:44

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!

GopalGK 27Dec2011 20:15

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.

aliens 4Feb2012 02:02

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>


All times are GMT +5.5. The time now is 03:24.