Chamar função de banner rotativo

andre.hebeler · Maio 26, 2009

Bom dia,

tenho uma função JS para fazer um Banner (logo) rotativo :

function Banners(){
   var MNews = new Array(); 
   MNews[0]= '<img src="<%=urlBase%>/imagens/top.gif" width=646 height=78 border=0>'
   MNews[1]= '<img src="<%=urlBase%>/imagens/logo.gif" width=646 height=78 border=0>'
   MNews[2]= '<img src="<%=urlBase%>/imagens/top.gif" width=646 height=78 border=0>'
          
   var Numero = Math.floor(Math.random()*3);
   document.write(MNews[Numero]);

}

a minha duvida é como chamar ela dentro da minha pagina JSP, se alguém tiver um exemplo ou alguma dica ficarei grato !!!

Att,

André Hebeler.

.Andreia. · Maio 26, 2009

coloca na tag <body> com o evento onload

andre.hebeler · Maio 26, 2009

certo ... eu coloco na tag body o evento onload...

mais como eu coloco ele no lugar que eu quero q exiba na pagina ???

.Andreia. · Maio 26, 2009

você pode criar uma div no lugar que você quer que apareça e em vez de ter:

document.write(MNews[Numero]);

voce substitui pela div, setando o o valor:

document.getElementById("NOME_DA_DIV").innerhtml = MNews[Numero];

andre.hebeler · Maio 26, 2009

Então ... modifiquei a function para:

function Banners(){
    var MNews = new Array(); 
    MNews[0]= '<img src="<%=urlBase%>/imagens/top.gif" width=646 height=78 border=0>'
    MNews[1]= '<img src="<%=urlBase%>/imagens/logo.gif" width=646 height=78 border=0>'
    MNews[2]= '<img src="<%=urlBase%>/imagens/top.gif" width=646 height=78 border=0>'
    
    var Numero = Math.floor(Math.random()*3);
    document.getElementById("banner").innerhtml = MNews[Numero];
            
}

e aonde que gostaria q exibisse eu coloquei a tag :

<div id="banner"></div>

só que não funcionou .... ele me apresenta o erro " Objeto esperado "

você tem alguma dico do q eu possa estar fazendo de errado !?

.Andreia. · Maio 26, 2009

esqueci de comentar o detalhe.. o problema do onload é que ele chama uma funcao, seta uma DIV que AINDA não existe..

Por isso que da erro de "Objeto esperado"

faz assim então, joga o script (sem ser dentro function) onde você quer q apareça. Exemplo:

<table>
<tr>
<td><script>
    var MNews = new Array(); 
    MNews[0]= "<img src='<%=urlBase%>/imagens/top.gif' width='646' height='78' border='0'>";
    MNews[1]= "<img src='<%=urlBase%>/imagens/logo.gif' width='646' height='78' border='0'>";
    MNews[2]= "<img src='<%=urlBase%>/imagens/top.gif' width='646' height='78' border='0'>";
    
    var Numero = Math.floor(Math.random()*3);
    document.write(MNews[Numero]);
</script></td>
</tr>
</table>

andre.hebeler · Maio 26, 2009

ele funcionou ... mas não do jeito que eu queria !

queria q fosse um banner dinamico ! que rotacionasse as imagens !

mas ele rotaciona a cada vez q eu do um refresh na pagina !!!!

Editado Maio 26, 2009 por andre.hebeler

.Andreia. · Maio 26, 2009

mas ele rotaciona a cada vez q eu do um refresh na pagina !!!!

rsss você não explicou isso antes!

Eu te dei uma sugestao mais logica, que o pessoal costumar usar: ao carregar a pagina.

especifique o que você quer ai fica mais facil. Por exemplo, rotacionar por tempo, por clique, por ação..... tem N possibilidades

andre.hebeler · Maio 26, 2009

O que eu preciso é o seguinte ...

Tenho meu portal onde na parte superior eu tenho o logo da empresa !!!

Hoje ele é estatico... só uma imagem ...

Gostaria que ele mostrasse várias imagens mas sem o refresh na pagina ... ou seja ... rotação por tempo seria !!!

são 5 usinas ... gostaria de exibir as fotos da 5 usinas e depois o logo da empresa ... isso tudo na mesma pagina ....

enquanto o usuário a utiliza ... sem o refresh !!!

agradeço pela sua ajuda ! se puder da uma dica de como faço isso ! seria muito util !!!

Eliseu M. · Maio 26, 2009

Ae, peguei um código de imagem aleatório no javascript.internet.com:


<!-- THREE STEPS TO INSTALL RANDOM IMAGE ROTATOR:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the onLoad event handler into the BODY tag
  3.  Put the last coding into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<script LANGUAGE="JavaScript">
<!-- Original:  Robert Bui (astrogate@hotmail.com) -->
<!-- Web Site:  http://astrogate.virtualave.net -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/02.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/03.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/04.jpg");
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
//  End -->
</script>
</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->

<BODY OnLoad="rotateImage('rImage')">

<!-- STEP THREE: Copy this code into the BODY of your HTML document  -->
<center>
<img name="rImage" src="http://javascript.internet.com/img/image-cycler/01.jpg" width=120 height=90>
</center>
[/codebox]

Lá no image_list você muda o link das imagens. No var interval, você põe o tempo em segundos. O resto é boi...

Té +!

andre.hebeler · Maio 26, 2009

Funcionou Legal ! agora eu só tenho q ajustar o tempo !!!

vou da uma estudada no código !!!

Mais uma vez agradeço a sua atenção !!!

show de bola !!!

.Andreia. · Maio 26, 2009

de uma estudada nas funcoes setInterval e setTimeout

outra coisa, tente enxugar o codigo, por exemplo..

var MNews = new Array(); 
        MNews[0]= "IMAGEM1.GIF";
        MNews[1]= "IMAGEM2.GIF";
        MNews[2]= "IMAGEM3.GIF";
       var Numero = Math.floor(Math.random()*3);
       document.write("<img src='"+ MNews[Numero] +"' width='50' height='78' border='0'>");

assim você evita de repetir as propriedades, as tags de imagem.. já que são iguais entre si

Cardon · Maio 28, 2009

dica.

da proxima vez faça tudo no flash

e faça ele puxar as imagens externamentes

por exemplo

a cada cinco segundos mudar o nome da imagem a ser puxada.

assim você pode controlar na time line

eu utilizo isso em meu site mas, as imagens mudam conforme o local do site que a pessoa se encontra

se é no setor de camisetas, vai aparecer uma imagem de camiseta, porém no código existe apenas uma função que busca essas imagens

q mudam conforme o que está escrito no url.

porém como você já tem a sequência de imagens a aparecer, pode fazer manualmente noi flash

ai vai a dica:

//uma camada com um certo tempo na time line correspondente a aparição de todas as imagens
//apenas um quadro no movie clipe que dentro dele um outro MovieClipe com dois quadros para ficar atualizando coloque isso

seuMovieClipe.loadMovie("imagens/"+_level0.variavel+".png");


//agora faça por exemplo uma nova camada no palco e um quadro chave a cada 10 quadros e coloque neles o seguinte

variavel = "imagem1";

falow

Entrar

Chamar função de banner rotativo

Pergunta

Link para o comentário

Compartilhar em outros sites

12 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns