Shefarol Soluções Web

Banner 4 - Voltar

Banner simples com navegação em Javascript

 

Código em Javascript
// JavaScript Document
var img = new Array('1','2','3','4');
var 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 = "Banner";
}

 

Código em CSS
#banner #banner_img {
	width: 960px;
	height: 200px;
	/*margin: auto;*/
}
#banner a {
	border: solid 1px #a9a9a9;
	padding: 5px 10px;
	text-decoration: none;
	color: #000;
}
#banner a:hover {
	text-decoration: none;
	background-color: #ff9900;
	color: #FFF;
}
#banner a.hover {
	background-color: #ff9900;
	color: #FFF;
}
#banner #botoes {
	width: 140px;
	/*margin: auto;*/
}
#banner #botoes {
	padding-top: 10px;
}