RSS

Moving images continuously

24 Apr

Yesterday I got a task to create a script that would make images move continuously. Of course the easiest way is to use flash for such sort of animation. But the client insisted on JavaScript.

First we need to prepare HTML – 2 dives with a few images inside.

<div id="picsholder">

   <div id="movingpics">

      <img src="/img/1.jpg">

      <img src="/img/2.jpg">

      <img src="/img/3.jpg">

      <img src="/img/4.jpg">

   </div>

</div>

The outer div limits of the visible area of the slidshow and must have width and height specified.

#picsholder { overflow:hidden; width:950px; height:135px; }

As we don’t want the images to move to the next line if the slideshow has length greater than desirable visible area, we position them absolutely in a positioning context generated by the outer div:

#picsholder { overflow:hidden; width:950px; height:135px; position:relative}
#picsholder img { width:200px; height:130px; position:absolute; }

Notice position:relative rule has been added to the outer div css to create positioning context.

Now all the images are stuck to the left side of the outer div. All we need to do is specify left property for each image. And then make them move!

For that I add some JavaScript on window onload event:

var movingpics = document.getElementById('movingpics');

if((movingpics)&amp;&amp;(movingpics.getElementsByTagName('img'))) {
   var links = movingpics.getElementsByTagName('img');
   var totallength = 0;
   movingpics.style.display = 'inline';
   for(var i=0, link; i&lt;links.length;i++){
      link = links[i];
      link.style.left = totallength + 'px';
      totallength+= link.offsetWidth;
   }
}

The code above gives each image of the slide show it’s own value of the left property accordingly to the position in the list. To make images move all I need is change the left property. For that I use the following function.

var movepic = function(){

   var movingpics = document.getElementById('movingpics');

   if((movingpics)&amp;&amp;(movingpics.getElementsByTagName('img'))) {

      var links = movingpics.getElementsByTagName('img');
      var totallength = 1250;

      for(var i=0, link; i&lt;links.length;i++){
      link = links[i];

      if(link.style.left.replace('px','')*1&lt;=0-link.offsetWidth){
            if(i==0){link.style.left =  (links[links.length-1].style.left.replace('px','')*1)+links[links.length-1].offsetWidth+'px';}
            else{link.style.left =  (links[i-1].style.left.replace('px','')*1)+links[i-1].offsetWidth+'px';	}

         } else {link.style.left =  ((link.style.left.replace('px',''))*1)-1+'px';}

      }

   }
}

I add it to the same onload function and make it execute every 50 milliseconds.

setInterval ( "movepic()", 50 );

That’s it!

Link to source file

Advertisements
 
Leave a comment

Posted by on April 24, 2009 in CSS, HTML, JavaScript

 

Tags: , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: