banner rotatorio

easy · #1 (**permalink**) 06/07/2009, 11:39

Amigos, como hacer un banner rotatorio parecido a este ejemplo?

http://www.idealistconsulting.com

Porfa alguien que me ayude en esto, encontré uno en el FAQ pero no me sale igual a este.

gracias

easy · #2 (**permalink**) 06/07/2009, 11:51

encontre esto pero solo me muestra las primeras dos imagenes, como hago para que me muestre las 4??

Código:

<script>
// Rotador de banner's . Carlitos. [email protected]
 
var ban = new Array()
var enl = new Array()
var indice = 0
 
ban[0] = new Image()
ban[0].src = "mdw.gif"
enl[0] = "http://www.maestrosdelweb.com"
 
ban[1] = new Image()
ban[1].src = "faq.gif"
clara[1] = "http://www.faqsdelweb.com"
 
ban[2] = new Image()
ban[2].src = "script.gif"
enl[2] = "http://www.webtutorial.com.ar/scriptmaster/"
 
ban[3] = new Image()
ban[3].src = "webest.gif"
enl[3] = "http://www.webestilo.com"
 
function rota()
{
if (indice ==  ban.length) indice = 0
 
if (document.images)
 {
  document.images.fotico.src = ban[indice].src  
 }
else
 {
  document.getElementById('fotico').src=ban[indice].src
 }
indice++
setTimeout('rota()',2000)
}
function vete()
{
window.open(enl[indice-1])
}
</script>
<body onload=rota()>
<img src="" id="fotico" onclick="vete()">

Adler · #3 (**permalink**) 06/07/2009, 12:28

Hola

Esto es a groso modo

Código javascript:

Ver originalvar url_vector = new Array(5);
var txt_vector = new Array(5);
var banner_vector = new Array(5);
var counter = 0;
var url = "";
 
url_vector[0] = "http://www.curso1.com";
url_vector[1] = "http://www.curso2.com";
url_vector[2] = "http://www.curso3.com";
url_vector[3] = "http://www.curso4.com";
url_vector[4] = "http://www.curso5.com";
 
 
 
txt_vector[0] = "Nivel muy bajo";
txt_vector[1] = "Vas subiendo de nivel";
txt_vector[2] = "Nivel intermedio";
txt_vector[3] = "Nivel avanzado";
txt_vector[4] = "Estas hecho un hacha";
 
 
 
if(document.images){
  for(i = 0; i < 5; i++)
  {
    banner_vector[i] = new Image(62,12);
    banner_vector[i] = "iconos/" + (i+1) + ".gif";
  }
}
 
 
function changeBanner(){
    if(counter > 4)
      counter = 0;
document.getElementById("banner").innerHTML = "<img src="+banner_vector[counter]+" width='62px' height='12px' title="+txt_vector[counter]+" border='0px' />"
url = url_vector[counter];
document.getElementById("texto").innerHTML = txt_vector[counter];
document.getElementById("banner_peq_5").style.background="white";
document.getElementById("banner_peq_"+(counter+1)).style.background="red";
    if (counter >= 1)
document.getElementById("banner_peq_"+counter).style.background="white";     
      counter++;
    }
 
 
timer = setInterval("changeBanner()", 2000);
window.onload = changeBanner;

Código html:

Ver original<a href="#" onClick="window.open(url,'BannerWin');">
<div id="banner"></div>
</a>
 
<div id="texto"></div>
 
<table border="1">
<tr>
 
<td id="banner_peq_1">
<img src="iconos/1.gif" />
</td>
<td id="banner_peq_2">
<img src="iconos/2.gif" />
</td>
<td id="banner_peq_3">
<img src="iconos/3.gif" />
</td>
<td id="banner_peq_4">
<img src="iconos/4.gif" />
</td>
<td id="banner_peq_5">
<img src="iconos/5.gif" />
</td>
</tr>
</table>

PD: Si necesitas involucra una bd, dilo, tengo otro ejemplo en el que se usa bd

Suerte

easy · #4 (**permalink**) 06/07/2009, 12:39

Muchisimas y gracias por adelantarte, creo que si me interesaría mucho lo de la bd. Pero solo sé sacar los datos de una bd con php no con javascript.

Alguna sugerencia??

Adler · #5 (**permalink**) 06/07/2009, 14:15

Hola

No, no, sería sacarlo con un lenguaje del lado del servidor. En este caso yo programo en ASP pero te resultaría fácil adaptarlo a PHP

Suerte

easy · #6 (**permalink**) 06/07/2009, 16:45

Perfecto, lo veré en asp y veré como adaptarlo, me podrias ayudar??

Adler · #7 (**permalink**) 07/07/2009, 04:30

Aquí tienes

Cita:

<%
Dim Imagen, Url, Texto, i, j
Dim ristra_img, ristra_url, ristra_texto
Imagen = 0
Url = 1
Texto = 2

SQL ="SELECT Imagen, Url, Texto FROM RotadorBanner"
set rs = oConn.Execute(SQL)

registros = rs.getrows()
rs.Close
Set rs = Nothing
oConn.Close
Set oConn = Nothing

ristra_img = ""
ristra_url = ""
ristra_texto = ""
For i = 0 to UBound(registros,2)
ristra_img = ristra_img & "'" & registros(Imagen,i) &"',"
ristra_url = ristra_url & "'" & registros(Url,i) &"',"
ristra_texto = ristra_texto & "'" & registros(Texto,i) &"',"
Next 'i
%>

<html>
<head>
<title>Rotador de publicidad</title>

<script type="text/javaScript">
var publicidad = [<%=Left(ristra_img,Len(ristra_img)-1)%>];
var direccion = [<%=Left(ristra_url,Len(ristra_url)-1)%>];
var texto = [<%=Left(ristra_texto,Len(ristra_texto)-1)%>];

var contador = 0;
var url = "";

function RotarPublicidad(){
if(contador > 4)

contador = 0;

document.getElementById("publicidad").innerHTML = "<img src="+publicidad[contador]+" width='62px' height='12px' title="+texto[contador]+" border='0px' />"
url = direccion[contador];
document.getElementById("texto").innerHTML = texto[contador];
document.getElementById("publicidad_peq_4").style. background="#FFFFFF";
document.getElementById("publicidad_peq_"+contador ).style.background="#FF0000";
if (contador >= 1)
document.getElementById("publicidad_peq_"+(contado r-1)).style.background="#FFFFFF";

contador++;
}

timer = setInterval("RotarPublicidad()", 2000);
window.onload = RotarPublicidad;

</script>
</HEAD>
<body>
<a href="#" onClick="window.open(url,'Ventana');">
<div id="publicidad"></div>
</a>

<div id="texto"></div>

<table border="1">
<tr>
<%
For j = 0 to UBound(registros,2)
%>
<td id="publicidad_peq_<%=j%>">
<img src="<%=registros(Imagen,j)%>" />
</td>
<%
Next 'j
%>
</tr>
</table>
</body>
</html>

Suerte