Banner rotativo (SIMPLES)

Olá pessoal, faz tempo que não posto nada, estou fazendo um trabalhinho para uma empresa e criei este banner rotativo bem rápido para suprir as necessidades, temporariamente, que está funcionando perfeitamente.

Segue o código:

Banner.html

<link href="banner.css" rel="stylesheet" type="text/css" />

<script type="text/jscript" src="banner.js"></script>

<div id="banner" class="banner">

	<div id="banner_img">

 <img src="banner_img/1.jpg" width="900px" height="300px" border="0" alt="Banner">

 </div>

 <div id="botoes">

 <a href="javascript:void(0);" id="banner_img_1" class="hover" onclick="mudaImg('0');">1</a>
 <a href="javascript:void(0);" id="banner_img_2" onclick="mudaImg('1');">2</a>
 <a href="javascript:void(0);" id="banner_img_3" onclick="mudaImg('2');">3</a>
 <a href="javascript:void(0);" id="banner_img_4" onclick="mudaImg('3');">4</a>

 </div>

</div>

Banner.css

@charset "utf-8";
/ CSS Document /

#banner #banner_img {

	width: 900px;
	height: 300px;
	border: solid 3px #333;
}

#banner a {

	border: solid 1px #333;
	background-color: #F7F7F7;
	padding: 5px;
	text-decoration: none;
	color: #000;
}

	#banner a:hover {
 border: solid 1px #333;
 text-decoration: underline;
 background-color: #333;
 color: #FFF;
	}

	#banner a.hover {
 background-color: #333;
 color: #FFF;
	}

#banner #botoes {

	width: 900px;
	text-align: right;
}

#banner #botoes {

	padding-top: 5px;
}

Banner.js

img = new Array('1','2','3','4');

indice = 0;

setInterval("mudaImg()", 3000);

function mudaImg(i) {

	if (i == 0 || i == 1 || i == 2 || i == 3) {

 indice = i;

	} else {

 if (indice == img.length - 1) {

 indice = 0;

 } else {

 indice++;

 }

	}

	document.getElementById("banner_img_1").setAttribute("class", "");
	document.getElementById("banner_img_2").setAttribute("class", "");
	document.getElementById("banner_img_3").setAttribute("class", "");
	document.getElementById("banner_img_4").setAttribute("class", "");
	document.getElementById("banner_img_" + img[indice]).setAttribute("class", "hover");

	document.getElementById("banner_img").innerHTML = "<img src='banner_img/"+ img[indice] +".jpg' width='900' height='300' border='0' alt='Banner'>";

}

Observações finais:

Coloquem todos os arquivos depois de criados em uma pasta só, e criem uma subpasta chamada "banner_img", dai é só colocar todas as imagens que querem que apareça no banner (no máximo 4), com os nomes de:

1.jpg

2.jpg

3.jpg

4.jpg

Tamanho das imagens, preferencialmente 900x300 ;)

O banner deve ficar assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img844.imageshack.us/img844/9919/zqn3.jpg&key=e8d85d79eb94407571582982bc930cbff5d1ddfb0661fb603c7ea86b7dec7cfb" alt="zqn3.jpg" />

Quem quiser fazer o download dos arquivos prontos: CLICK AQUI

Abraços a todos.