Анимация | Описание
Смена кадров происходит при использовании функции settimeout, одним из параметров которой является задержка в миллисекундах. Работает в Internet Explorer, Netscape Navigator версий 4.x и выше.Если Вы хотите использовать любой из наших примеров, поставьте на нас ссылку.
Здесь Вы можете взять готовый HTML-код для такой ссылки.
<html>
<head>
<title>www.redmount.com - DHTML - Анимация</title>
<script language=javascript>
<!--
//global variables
var i1=1, i2=21, i3=41, layerRef="null", styleSwitch="null";
function init()
{
layerRef="document.all";
styleSwitch=".style";
start1();
start2();
start3();
}
// -->
</script>
</head>
<body onload=init() bgcolor=black text=white>
<script language=javascript>
<!--
function showLayer(layerName)
{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}
function hideLayer(layerName)
{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}
function start1()
{
eval('hideLayer("kadr'+i1+'")');
i1++;
if(i1>20)
i1=1;
eval('showLayer("kadr'+i1+'")');
setTimeout("start1()",eval(0));
}
function start2()
{
eval('hideLayer("kadr'+i2+'")');
i2++;
if(i2>40)
i2=21;
eval('showLayer("kadr'+i2+'")');
setTimeout("start2()",eval(70));
}
function start3()
{
eval('hideLayer("kadr'+i3+'")');
i3++;
if(i3>60)
i3=41;
eval('showLayer("kadr'+i3+'")');
setTimeout("start3()",eval(200));
}
// -->
</script>
<style type="text/css">
#text {position: absolute; visibility: visible; top: 150; left: 15; z-index: 10;}
#kadr1 {position: absolute; visibility: visible; top: 50; left: 50; z-index: 10; width:100}
#kadr2 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr3 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr4 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr5 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr6 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr7 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr8 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr9 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr10 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr11 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr12 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr13 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr14 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr15 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr16 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr17 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr18 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr19 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr20 {position: absolute; visibility: hidden; top: 50; left: 50; z-index: 10; width:100}
#kadr21 {position: absolute; visibility: visible; top: 50; left: 250; z-index: 10; width:100}
#kadr22 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr23 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr24 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr25 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr26 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr27 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr28 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr29 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr30 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr31 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr32 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr33 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr34 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr35 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr36 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr37 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr38 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr39 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr40 {position: absolute; visibility: hidden; top: 50; left: 250; z-index: 10; width:100}
#kadr41 {position: absolute; visibility: visible; top: 50; left: 450; z-index: 10; width:100}
#kadr42 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr43 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr44 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr45 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr46 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr47 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr48 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr49 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr50 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr51 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr52 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr53 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr54 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr55 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr56 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr57 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr58 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr59 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
#kadr60 {position: absolute; visibility: hidden; top: 50; left: 450; z-index: 10; width:100}
</style>
<div id="kadr1"><img src="ho01.gif" border=0></div>
<div id="kadr2"><img src="ho02.gif" border=0></div>
<div id="kadr3"><img src="ho03.gif" border=0></div>
<div id="kadr4"><img src="ho04.gif" border=0></div>
<div id="kadr5"><img src="ho05.gif" border=0></div>
<div id="kadr6"><img src="ho06.gif" border=0></div>
<div id="kadr7"><img src="ho07.gif" border=0></div>
<div id="kadr8"><img src="ho08.gif" border=0></div>
<div id="kadr9"><img src="ho09.gif" border=0></div>
<div id="kadr10"><img src="ho10.gif" border=0></div>
<div id="kadr11"><img src="ho11.gif" border=0></div>
<div id="kadr12"><img src="ho12.gif" border=0></div>
<div id="kadr13"><img src="ho13.gif" border=0></div>
<div id="kadr14"><img src="ho14.gif" border=0></div>
<div id="kadr15"><img src="ho15.gif" border=0></div>
<div id="kadr16"><img src="ho16.gif" border=0></div>
<div id="kadr17"><img src="ho17.gif" border=0></div>
<div id="kadr18"><img src="ho18.gif" border=0></div>
<div id="kadr19"><img src="ho19.gif" border=0></div>
<div id="kadr20"><img src="ho20.gif" border=0></div>
<div id="kadr21"><img src="ho01.gif" border=0></div>
<div id="kadr22"><img src="ho02.gif" border=0></div>
<div id="kadr23"><img src="ho03.gif" border=0></div>
<div id="kadr24"><img src="ho04.gif" border=0></div>
<div id="kadr25"><img src="ho05.gif" border=0></div>
<div id="kadr26"><img src="ho06.gif" border=0></div>
<div id="kadr27"><img src="ho07.gif" border=0></div>
<div id="kadr28"><img src="ho08.gif" border=0></div>
<div id="kadr29"><img src="ho09.gif" border=0></div>
<div id="kadr30"><img src="ho10.gif" border=0></div>
<div id="kadr31"><img src="ho11.gif" border=0></div>
<div id="kadr32"><img src="ho12.gif" border=0></div>
<div id="kadr33"><img src="ho13.gif" border=0></div>
<div id="kadr34"><img src="ho14.gif" border=0></div>
<div id="kadr35"><img src="ho15.gif" border=0></div>
<div id="kadr36"><img src="ho16.gif" border=0></div>
<div id="kadr37"><img src="ho17.gif" border=0></div>
<div id="kadr38"><img src="ho18.gif" border=0></div>
<div id="kadr39"><img src="ho19.gif" border=0></div>
<div id="kadr40"><img src="ho20.gif" border=0></div>
<div id="kadr41"><img src="ho01.gif" border=0></div>
<div id="kadr42"><img src="ho02.gif" border=0></div>
<div id="kadr43"><img src="ho03.gif" border=0></div>
<div id="kadr44"><img src="ho04.gif" border=0></div>
<div id="kadr45"><img src="ho05.gif" border=0></div>
<div id="kadr46"><img src="ho06.gif" border=0></div>
<div id="kadr47"><img src="ho07.gif" border=0></div>
<div id="kadr48"><img src="ho08.gif" border=0></div>
<div id="kadr49"><img src="ho09.gif" border=0></div>
<div id="kadr50"><img src="ho10.gif" border=0></div>
<div id="kadr51"><img src="ho11.gif" border=0></div>
<div id="kadr52"><img src="ho12.gif" border=0></div>
<div id="kadr53"><img src="ho13.gif" border=0></div>
<div id="kadr54"><img src="ho14.gif" border=0></div>
<div id="kadr55"><img src="ho15.gif" border=0></div>
<div id="kadr56"><img src="ho16.gif" border=0></div>
<div id="kadr57"><img src="ho17.gif" border=0></div>
<div id="kadr58"><img src="ho18.gif" border=0></div>
<div id="kadr59"><img src="ho19.gif" border=0></div>
<div id="kadr60"><img src="ho20.gif" border=0></div>
<div id="text">Text</div>
</body>
</html>