Demo Dynamic HTML - Imágenes en secuencia

Imágenes en secuencia

Compatibilidad: Ms Internet Explorer, Netscape

Esta demo muestra cómo crear animaciones partiendo de simples file de imagen. El funcionamiento es similar al de los gif animados: se establece una secuencia y se asigna un tiempo, expresado en milésimas de segundo.
Los usos de este ejemplo DHTML pueden ser muy variados y dependerán en gran medida de las decisiones que adopten los elaboradores.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--

n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

function init() {
	numImgAnim = new GifAnim('numDiv','numImg','num',5,200)
}

function preload() {
	for (var i=0; i<arguments.length; i++) {
		eval(arguments[i]+' = new Image()')
		eval(arguments[i]+'.src = "'+arguments[i]+'.gif"')
	}
}
for (var i=0;i<=5;i++) preload('num'+i)

function changeImage(layer,imgName,imgObj) {
	if (n && layer!=null) eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src');
	else document.images[imgName].src = eval(imgObj+".src");
}

function GifAnim(layer,imgName,imgSeries,end,speed,startFrame) {
	this.layer = layer
	this.imgName = imgName
	this.frame = new Array()
	for (var i=0; i<=end; i++) this.frame[i] = imgSeries+i
	this.end = end
	this.speed = speed
	this.active = false
	this.count = (startFrame)? startFrame : 0
	this.obj = imgName + "Object"
	eval(this.obj + "=this")
	this.play = GifAnimPlay
	this.run = GifAnimRun
	this.stop = GifAnimStop
	this.goToFrame = GifAnimGoToFrame
}
function GifAnimPlay(loop,reset,fn) {
	if (!this.active) {
		this.active = true
		if (!loop) loop = false
		if (!reset) reset = false
		if (!fn) fn = null
		this.run(loop,reset,fn)
	}
}
function GifAnimRun(loop,reset,fn) {
	if (this.active && this.count <= this.end) {
		changeImage(this.layer,this.imgName,this.frame[this.count])
		this.count += 1
		setTimeout(this.obj+".run("+loop+","+reset+",\""+fn+"\")",this.speed)
	}
	else {
		if (loop && this.active) {
			this.count = 0
			this.run(loop,reset,fn)
		}
		else {
			this.active = false
			if (reset) this.goToFrame(0)
			eval(fn)
		}
	}
}
function GifAnimStop() {
	this.active = false
}
function GifAnimGoToFrame(index) {
	this.count = index
	changeImage(this.layer,this.imgName,this.frame[this.count])
}

//-->
</SCRIPT>
<STYLE TYPE="text/css">

</STYLE>

</HEAD>

<A HREF="javascript:numImgAnim.play()">Play</A>
<BR><A HREF="javascript:numImgAnim.play(true)">Play (infinito)</A>
<BR><A HREF="javascript:numImgAnim.stop()">Stop</A>
<BR>Immagini:
<A HREF="javascript:numImgAnim.goToFrame(0)">0</A> 
<A HREF="javascript:numImgAnim.goToFrame(1)">1</A> 
<A HREF="javascript:numImgAnim.goToFrame(2)">2</A> 
<A HREF="javascript:numImgAnim.goToFrame(3)">3</A> 
<A HREF="javascript:numImgAnim.goToFrame(4)">4</A> 
<A HREF="javascript:numImgAnim.goToFrame(5)">5</A>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]