Efeito rotativo em Javascript

Recentemente criei esta rotina, bem simples, envolve um pouco de CSS, HTML e JavaScript, nada muito complicado.

Fica ae para que possam utilizar.

Qualquer sugestão, comente.

01
<style type="text/css">

02
#destaques {border: 1px solid #006600; width: 333px; height: 212px;}

03
#destaques a{ text-decoration: none;}

04
#destaques a:hover{ text-decoration: underline;}

05
#destaques .bg { background-color: #E7F0BB; border-bottom: 1px solid #D7E58D; float: left; width: 100%;}

06
#destaques .foco{ text-decoration: none; background-color: #82AE01; color: #fff;}

07
#destaques img { float: left; width: 333px; height: 123px;}

08
#destaques .indice { float: left; width: 99%; height: 34px;}

09
#destaques .indice ul li{ margin: 0px; border: 1px solid #000; display: inline; height: 29px; width: 29px; }

10
#destaques .indice ul li { color: #FFF;}

11
#destaques .normal a{ text-decoration: none; color: #000;}

12
#destaques .olho { color: #848486; float: left; margin-left: 7px; padding-bottom: 2px; width: 100%; }

13
#destaques .titulo { color: #82AE01; float: left; font-weight: bold; margin: 3px; padding: 2px; width: 100%; }

14
</style>

15
<div id="destaques">

16
<div id="n1" style="display:none">

17
<a href="">

18
<img src="x" name="rotativo" border="0"/>

19
<span class="bg">

20
<span class="titulo">I.MATERIA...</span>

21
<span class="olho">Texto..</span>

22
</span>

23
</a>

24
</div>

25
<div id="n2" style="display:none">

26
<a href="">

27
<img src="x" name="rotativo" border="0"/>

28
<span class="bg">

29
<span class="titulo">II.MATERIA ...</span>

30
<span class="olho">Texto ..</span>

31
</span>

32
</a>

33
</div>

34
<div id="n3" style="display:none">

35
<a href="">

36
<img src="x" name="rotativo" border="0"/>

37
<span class="bg">

38
<span class="titulo">III. Materia.</span>

39
<span class="olho">Texto ..</span>

40
</span>

41
</a>

42
</div>

43
<div id="n4" style="display:none">

44
<a href="">

45
<img src="x" name="rotativo" border="0"/>

46
<span class="bg">

47
<span class="titulo">IV. Materia...</span>

48
<span class="olho">Texto ..</span>

49
</span>

50
</a>

51
</div>

52
<span class="indice">

53
<ul>

54
<li>&gt;</li>

55
<li id="d1"><a href="javascript:main(1,0)">1</a></li>

56
<li id="d2"><a href="javascript:main(2,0)">2</a></li>

57
<li id="d3"><a href="javascript:main(3,0)">3</a></li>

58
<li id="d4"><a href="javascript:main(4,0)">4</a></li>

59
</ul>

60
</span>

61
</div>

62

63
<script language="JavaScript">

64
var max = 4; // Total de noticias

65
var t = 5; // Sera convertido em Segundos pelo JS

66
var disp;

67
var timer;

68
function main(x,y)

69
{

70
disp = document.getElementById("n"+x).style;

71
if(disp.display=="none"){disp = "block";}

72
for(i=1;i<=max;i++)

73
{

74
if(i==x){

75
document.getElementById("n"+i).style.display="block";

76
document.getElementById("d"+i).className = "foco"; }

77
else{

78
document.getElementById("n"+i ).style.display="none";

79
document.getElementById("d"+i).className = "normal"; }

80
}

81
if(y==0){ clearTimeout(timer); }

82
if(x==max){x=1}else{x=x+1;}

83
next(x,t)

84
}

85
function next(ix,sec) { timer=setTimeout("main("+ ix +","+ sec +")",sec * 1000);}

86
main(1); // Incluir uma função em Javascript para o Onload da página

87
</script>