FORUMS: list search recent posts

Changes Images

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Jeff Kelley
Changes Images
on May 19, 2008 at 4:30:36 pm

Does anyone know of a java script that would periodically change an image on the screen? I would like about 25 to 30 images to cycle through on the screen, each one staying on for about 10 seconds.

Right now I've just been making a large animated gif, but that not a good way to go about it.


Return to posts index

Curtis Thompson
Re: Changes Images
on May 19, 2008 at 4:39:26 pm


ya - it's fairly straightforward javascript - you can change an image by altering it's src property to any url, and then it's just a case of doing a timeout in between...

i'd start here:

you can find a ton of free ones and examples out there...


Return to posts index

Abraham Chaffin
Re: Changes Images
on May 19, 2008 at 5:00:05 pm

I like to use Dreamweaver's swap image function executed with the javascript timeout function and an array of images. Here's an example of that idea in a tutorial:

I've hacked up a version of that and placed the code below - should work -

Have fun!

<script type="text/javascript">
// Comma separated list of images to rotate
var imgs = new Array('images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg');
// delay in milliseconds between image swaps 1000 = 1 second
var delay = 5000;
var counter = 0;
function rotateimages(){
if(counter == (imgs.length)){
counter = 0;
MM_swapImage('Image1', '', imgs[counter++]);
setTimeout('rotateimages()', delay);
function preloadImgs(){
for(var i=0;i<imgs.length;i++){
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
<body onload="preloadImgs();rotateimages();">
<img src="images/initialimage.jpg" name="Image1" width="125" height="125" border="0" id="Image1" />


Return to posts index

Jeff Kelley
Re: Changes Images
on May 19, 2008 at 9:30:50 pm

Thanks for the response.

Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 All Rights Reserved