{source}
<style>@charset “utf-8”;
/* CSS Document */
#banner #banner_img {
width: 960px;
height: 150px;
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;
}</style>
<script>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=”http://prosinos.rs.gov.br/images/banner_img/ver2/”+ img[indice] +”.jpg” width=”960″ height=”150″ border=”0″ alt=”Banner”>“;
}</script>
<div id=”banner” class=”banner”>
<div id=”banner_img”>
<img src=”banner_img/1.jpg” width=”960px” height=”150px” 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>
{/source}