Ir para conteúdo
Fórum Script Brasil
  • 0

Chamar função de banner rotativo

andre.hebeler

Perguntado por andre.hebeler,

 Share

Pergunta

andre.hebeler

andre.hebeler

Postado
Postado

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.

Link para o comentário
Compartilhar em outros sites

12 respostass a esta questão

Posts Recomendados

  • 0
andre.hebeler

andre.hebeler

Postado
  • Autor
Postado

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 !?

Link para o comentário
Compartilhar em outros sites
  • 0
.Andreia.

.Andreia.

Postado
Postado

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>

Link para o comentário
Compartilhar em outros sites
  • 0
.Andreia.

.Andreia.

Postado
Postado

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

Link para o comentário
Compartilhar em outros sites
  • 0
andre.hebeler

andre.hebeler

Postado
  • Autor
Postado

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 !!!

Link para o comentário
Compartilhar em outros sites
  • 0
Eliseu M.

Eliseu M.

Postado
Postado

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é +!

Link para o comentário
Compartilhar em outros sites
  • 0
.Andreia.

.Andreia.

Postado
Postado

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

Link para o comentário
Compartilhar em outros sites
  • 0
Cardon

Cardon

Postado
Postado

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

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...