Banner rotativo em JS
Oi gente,
Preciso colocar um banner para um site, porém tenho pouco conhecimento em js.
Achei esse na internet consegui alterar para o modo que quero, mas preciso colocar link nas imagens.
Cada uma com link diferente. Segue o código:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css">
<link href="banner.css" rel="stylesheet" type="text/css" />
<script type="text/jscript" src="banner.js"></script>
<title>Matipó Vip</title>
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="banner" class="banner">
<div id="banner_img">
<a href="#" id="menu"><img src="banner_img/1.jpg" width="600px" height="400px" border="0" alt="Banner"></a>
</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>
</body>
</html>banner.css
@charset "utf-8";
/ CSS Document /
#banner #banner_img {
width: 600px;
height: 400px;
border: solid 0px #333;
}#banner a {
border: solid 0px #cccc33;
background-color: #F7F7F7;
padding: 20px;
text-decoration: none;
color: #000;
;
}
#banner a:hover {
border: solid 0px #333;
text-decoration: underline;
background-color: #333;
color: #FFF;
}
#banner a.hover {
background-color: #333;
color: #FFF;
}#banner #botoes {
width: 600px;
text-align: right;
margin-top: -47px;
}#banner #botoes {
padding-top: 10px;
}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='600' height='400' border='0' alt='Banner'>";Discussão (0)
Carregando comentários...