Untitled

<html>
<head>
<meta charset="utf-8">
<title>Timer example</title>

<style>
div#kissa_container
{
	height: 64px;
	background-color: black;
	position: relative;
	width: 100%;

}

img#kissa
{
	height: 64px;
	width: 128px;
	position: relative;
	left: 0px;
}
</style>

<script>
var nroKissa = 1;
var kisuLeft = 0;
var step = 30;
var delay = 70;

function animate()
{
	kisuLeft += step;
	if (kisuLeft >= window.innerWidth - 128) { kisuLeft = 0; }

	if (nroKissa == 8) { nroKissa = 1; }
	else { nroKissa += 1; }


	// change styles
	// remember: Math.round()
	// remember: (px ja %)

	document.getElementById("kissa").style.left = kisuLeft + "px";
	document.getElementById("kissa").src = "cat" + nroKissa + ".png";

	setTimeout("animate()", delay);
}
</script>
</head>
<body onload="animate()">
	<div id="kissa_container">
		<img id="kissa" src="cat1.png">
	</div>
</body>
</html>