Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Diaclau

Banner rotativo em JS

Por , em Javascript

Recommended Posts

Diaclau    0

Diaclau
Postado

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'>";

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito