Javascript - Comment faire défiler une image qui se répèt

‹html›
‹head›
  ‹title›Démo de frise d'image déroulantes - HackTrack 10/02/2007‹/title›
  ‹script language="javascript" type="text/javascript"›
	/**
	*	AnimatedImage
	*
	*	Author: HackTrack (Philippe FERY - philippe.fery@gmail.com)
	*
	*	Date : 10/02/2007
	*
	*	Version 1.0
	*
	*	This script allows you to display a repeated image on the screen width, inside a DOM element.
	*	
	*	To use it, just call function 'startAnimation' with parameters (see function 'startAnimation')
	*
	*	TO DO: snap first and last image in order not to see horizontal scrollbar moving
	* */
 
 
	var animatedImage; 	// image to be animated
	var stepX;			// number of pixels to move image between each move
	var dx;				//temporary variable used to calculate the current image offset
	var delay;			//delay between two moves (in milliseconds)
	var imageWidth;		//the image width
	var imageHeight;	//the image height(not used at now)
	var width;			//window inner width
	var height;			//window inner height (not used at now)
	var domElement;		//the DOM element where images have to be displayed
	var innerDOMElement;//a temporary DIV element used to display images inside the domElement
 
	/**
	*	Function :
	*		name: runAnimation
	*		description:  endless loops image animation
	*	Parameters: none
	*/
	function runAnimation(){
		dx+=stepX;
		dx=parseInt(dx%imageWidth);
		width = parseInt(domElement.style.width);
		height = domElement.offsetHeight;
		var imageCount = parseInt(width/imageWidth)+3;
		domElement.style.overflow="hidden";
		innerDOMElement.style.width=imageCount*imageWidth;
		if(innerDOMElement.children != null){
			while(innerDOMElement.children.length›0){
				var elm =innerDOMElement.children[0];
				innerDOMElement.removeChild(elm);
				elm=null;
			}
		}
		var tmpImage;
		for(i=0;  i‹imageCount ; i++){
			tmpImage = new Image();
			tmpImage.src=animatedImage.src;
			tmpImage.style.position="relative";
			tmpImage.style.top="0px";
			imageLeft=imageWidth*-1;
			tmpImage.style.left=imageLeft+"px";
			innerDOMElement.appendChild(tmpImage);
		}		
		innerDOMElement.style.position="relative";
		innerDOMElement.style.left=dx;
		setTimeout("runAnimation()",delay);
	}
 
	/**
	*	Function :
	*		name: startAnimation
	*		description:  initializes animation then starts it
	*	Parameters:
	*		targetElementName: the DOM element where the images have to be displayed
	*		imageURL: image location
	*		step: the number of pixels the image will be moved each time (positive value=move right; neagtive value=move left)
	*		delayInMillis: the delay in milliseconds between each move
	*/
	function startAnimation(targetElementName, imageURL, step, delayInMillis){
		animatedImage= new Image();
		animatedImage.src=imageURL;
		imageWidth=animatedImage.width;
		imageHeight=animatedImage.height;
		domElement=document.getElementsByName(targetElementName)[0];
		stepX = step;
		delay = delayInMillis;
		dx=0;
		innerDOMElement=document.createElement('div');
		domElement.appendChild(innerDOMElement);
		runAnimation();
	}
  ‹/script›
‹/head›
‹!--body onload="startAnimation('frise','file://F:/testBG_mini.jpg',-20,10);"--›
‹body onload="startAnimation('frise','file://F:/heartbeat.gif',-1,20);"›
‹p›Demo de défilement d'images - HackTrack 12/02/2007‹/p›
‹div id="frise" name="frise" style="border: solid 1px black;width:1024;"›
‹/div›
<img src="https://www.gaudry.be/en/img/smiley/icon_cool.gif" alt=";-)" hspace="10" />
HackTrack
 
&#139;/body&#155;
&#139;/html&#155;