Banner rotativo em javascript

banner javascript - dicas de javascript para sites e blogsUma das formas de ganhar dinheiro com o seu blog  é com o uso de banners, sejam de afiliados ou publicidade direta(venda direta de espaço publicitário a um determinado cliente) e você pode fazer de três formas diferentes: banners fixos, banners rotativos e banners rotativos e dinâmicos.

Os banners fixos, como o nome já diz, não mudarão nem em tempo real nem quando a página for atualizada. Os banners apenas rotativos irão mudar a cada vez que um usuário acessar a página ou atualiza-la. O sistema de banners rotativos e dinâmicos terá as características dos banners rotativos e além disso mudarão em tempo real.


Vamos então aprender com esse pequeno tutorial a criar um sistema de banner rotativo e dinâmico em javascript.

Você pode optar por economizar espaço publicitário usando esse tipo de sistema, porque ao invés de separar por exemplo, espaço para 6 banners, usando o estilo dinâmico você reservará apenas um espaço, onde os banners ficarão revezando-se.

Isso também é muito útil se pensarmos que as última atualizações do algorítimo do Google tende a priorizar sites com menos espaços publicitários e mais conteúdo.

O sistema funcionará da seguinte forma: a cada acesso a uma página ou quando o usuário atualiza-la, o sistema sorteará aleatoriamente todos os banners distribuindo-os em posições sequenciais, e nenhum banner se repetirá até que toda sequencia seja completada. A partir daí o sistema fará novo sorteio e o processo se repetirá. o número de vezes que isso acontecerá será definido para cada grupo de banners separadamente.

Todos terão chances iguais, pois se você decidir que o processo acontecerá três vezes, depois da terceira vez o último banner sorteado ficará fixo, até que o usuário atualize a página. Como o sorteio é aleatório e a sequencia de banners não será repetida, então qualquer banner poderá ser o último que ficará fixo.

Importante: você só poderá usar um grupo de banners por página, do contrário entrarão em conflito e também não é indicado se colocar um número alto de repetição, pois o sistema sorteia primeiro a sequencia para depois de exibir. Portanto, dependendo do número de repetições o processo poderá ser mai lento ou mais rápido.

O sistema contará com dois arquivos externos js. Um para a função e outro para os grupos da banners.

Vamos então ao primeiro arquivo js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
var numero = 0;
var i = 0;
var icont=0;
var acumula="";
var num = new Array();

///////////////////////////// inicio função principal /////////////////////////////////


//função que será inserida na página para expor os banners

function banner(path,largura,altura,tempo,n_vezes){

//================================== começo 1º loop ===================================

n_banners=ref.length

for(icont=1;icont<=n_banners;icont++){

acumula+= 'num['+icont+'] == numero ||'
}
acumula+="num==numero"

acumula=eval(acumula)
//inicializando o contador que irá relacionar os números

//aos banners

for (i=0; i < (ref.length)-1; i++) {

//*******************************************************

//automatizando o intervalo de números a serem sorteados

//de acordo com o números de banners

maxi= (ref.length)-2;
//******************************************************


//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

//selecionando aleatóriamente um número entre o intervalo

//definido pela variável maxi

numero = Math.round((maxi -1 + 1) * Math.random() + 1);
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


//******************************************************************************


//Certificando para que um número não saia duas vezes

//colocando-se mais banners terá que aumentar propocionalmente

//abaixo já está programado para até 26 banners

//ex: mais um banner acrescentado, teria que se colocar : ||num==numero

if(acumula)
{
i--;
}
else
{
num[i] = numero;
}
//*******************************************************************************


}

//================================= fim 1º loop ===================================


//:::::::::::::::::::::::::::::::::::::::::::::::::::::

//definindo o contador inicialmente como zero para

//que o primeiro banner apareça imediatamente

cont=0;
//:::::::::::::::::::::::::::::::::::::::::::::::::::::


//=============================== começo 2º loop ==================================


for (i2=0; i2<n_vezes; i2++) {

//********************************** começo 3º loop *******************************

//Criando automaticamente o número de banners correspondente

//as urls criadas nas funções do arquivo urls.js

for (i=0; i < (ref.length)-1; i++) {

setTimeout("document.images['ban'].src='" + path + "banner" + num[i]+ ".gif'",cont);

setTimeout("document.links('ligue').href="" + ref[ num[i]] + """,cont);

//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

//Somando o tempo passado como parâmetro na função

//banners(), ao contador, em loop

cont+=tempo;
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


}
//******************************* fim 3º loop ********************************


}
//=================================== fim 2º loop ============================


//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

// Imprimindo as imagems com os links

document.write('<a href="" name="ligue" target="_blank">')
document.write('<img src="" border="0" name="ban" height="')
document.write(altura+'"'+'width="'+largura+ '"></a>')
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


}

////////////////////////////// fim função principal ///////////////////////////////////

Veja os parâmetros passados na função:

1) path : caminho até a pasta onde estão o banners

2) largura : largura dos banners

3) altura: altura dos banners

4) tempo: tempo de mudança dos banners em milissegundos

5) n_vezes: quantas vezes o processo irá se repetir

É muito importante que cada grupo de banners esteja em uma pasta que será apontada na chamada da função e os nomes serão fixos seguidos de um numeral, exemplo: banner1.gif, banner2.gif, banner3.gif etc, do contrário não funcionará.

Crie uma pasta principal e salve o arquivo como “banner-javascript-rotativo.js”

Agora vamos ver o código do arquivo js que guarda os grupos de banners

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var ref = new Array();

function endereco1(){
//****************************************************************

//Coloque aqui as Urls dos banners

ref[1]="http://virtualsite/chat/readme.txt"
ref[2]="http://virtualsite/chat/chat/admin.php3"
ref[3]="http://virtualsite/php/classes/class1.php"
ref[4]="http://virtualsite/php/datas/data b.php"
ref[5]="http://virtualsite/php/outros/Calculator.php"
ref[6]="http://virtualsite/php/outros/Calendar.php"
ref[7]="http://virtualsite/php/outros/eregreplace.php"
ref[8]="http://virtualsite/php/outros/determinar erro php.txt"
ref[9]="http://virtualsite/php/outros/Count Down.php"
//****************************************************************

}

function endereco2(){
//****************************************************************

//Coloque aqui as Urls dos banners

ref[1]="JAVA SCRIPT EFEITO/banner multiplo.html"
ref[2]="JAVA SCRIPT EFEITO/banner personal.html"
ref[3]="JAVA SCRIPT EFEITO/botão muda cor.htm"
ref[4]="JAVA SCRIPT EFEITO/cor de fundo6.htm"
ref[5]="JAVA SCRIPT EFEITO/efeito_de_cor_no_fundo.htm"
ref[6]="JAVA SCRIPT EFEITO/espelho.htm"
ref[7]="JAVA SCRIPT EFEITO/fade.html"
ref[8]="JAVA SCRIPT EFEITO/mouse over colours.htm"
ref[9]="JAVA SCRIPT EFEITO/SCRIPT4.html"
//****************************************************************

}

Perceba que as funções guardam apenas as urls dos sites dos anunciantes para onde os banners apontarão ou arquivos do seu próprio blog/site se quiser, pois os banneres serão lidos automaticamente à partir da pasta que for definida para aquele grupo de banners, então o endereço do primeiro ref por exemplo, terá que coincidir com o banner1.gif,  do segundo ref com o banner banner2.gif  e assim por diante.

salve esse arquivo também dentro da pasta com o nome de “urls-banner-javascript.js”.

Agora para incluir os grupos de banners é só chamar os dois arquivos js na página e incluir um js de chamada das funções, veja um exemplo abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<head>
<title>Banner Javascript rotativo e dinâmico </title>
<!--*********************************************************//-->
<script language="JavaScript1.2" src="js/banner-javascript-rotativo.js"></script>
<script language="JavaScript1.2" src="js/urls-banner-javascript.js"></script>
<!--*********************************************************//-->
</head>

<body>

<!--***************************//-->
<script>
endereco1()
banner("images1/",200,100,1000,'3');
</script>
<!--***************************//-->

</body>
</html>

Perceba que há a chamada de duas funções  ”endereco1()” que é um nome escolhido por você e que guarda as urls para onde os banners do seu grupo aponta.

A segunda função “banner()” é padrão com os parâmetro e caminho para a pasta de banners, largura, altura, tempo para a mudança dos banners e quantas vezes o processo irá se repetir.

Para chamar o outro grupo de banners é só fazer o mesmo processo em outra página mudando apenas o nome da função para endereco2() e atribuindo os parâmetro condizentes na função “banner()”.

Você pode criar quantos grupos de banners queira, mas lembre-se que não poderá colocar dois na mesma página.

Aprenda a fazer também um menu retrátil em javascript e css: Menu retrátil em javascript e css

Até a próxima.

15 Respostas para Banner rotativo em javascript

  1. dermeval, nao sei se vc percebeu la naqueles arquivos q eu te passei do banner rotativo, la tem um codigo q faz mudar o sentido de giro, direito e esquerdo, so q eu deixei ele vazio pra nao aparecer o letreiro na pagina do meu site…
    e outra, tem como tbm colocar mais imagens no banner, porem tem q definir o tamanho correto das imagens, o q ficam um poko mais trabalhoso pois as vezes vc tem q mexer na imagem com software de terceiros.

    obrigado ate a proxima…

  2. Onde eu coloco as imagens para ser chamada pela função js, qual pasta eu tenho que criar?

    • Olá Eduardo,

      Você é quem decide, observe a chamada da função:

      banner(“images1/”,200,100,1000,’3′)

      Veja o primeiro parâmetro, que é o caminho para as imagens, nesse caso os banneres tem que ficar em uma subpasta chamada “images1″
      mas você pode mudar para outra pasta se preferir.

      Abraço.

  3. As minhas imagens estão dentro de uma pasta chamada img/images1/ esta correto né?
    E precisa alterar colocando em algum lugar no código a pasta img, porque não esta funcionando, não aparece as imagens na tela. Se poder me ajudar agradeço.

    • Nesse caso você precisa mudar o path na chamada da função, por que no seu caso significa que o script está em uma pasta principal e as imagens estão dentro de uma pasta chamada “images1″ mas esta pasta já está dentro de outra chamada “img”, então ficaria assim:
      banner(‘img/images1/’,200,100,1000’3′)

      A sequencia pelo que você disse seria:

      Pasta principal > Pasta Img > Pasta images1

      Mas não tem porque colocar a pasta “images1″ dentro da pasta “img”

      Basta criar a pasta principal onde ficará o script e dentro dela criar a pasta images1 com as fotos dentro e chamar como coloquei no exemplo

  4. desculpa ficar enchendo o saco, mas é que o meu não vai de jeito nenhum. Da esse erro no console do firebug.
    SyntaxError: missing ) after argument list
    setTimeout(“document.links(‘ligue’).href=”" + ref[ num[i]] + “”",cont);
    index.html (line 17, col 42)

    ReferenceError: banner is not defined
    banner(“images1/”,200,100,1000,’3′);

    Eu apenas copiei e colei sem alterar nada do exemplo feito acima.
    A estrutura do meu projeto é a seguinte: tenho uma pasta Banner e dentro dela esta todas as outras e os codigo tbm.
    Banner: images1, js, index.html.
    images1:banner1.gif, banner2.gif, …….
    js: banner-javascript-rotativo.js, urls-banner-javascript.js.

    esta certo assim?
    eu não alterei nenhuma linha.

  5. não chegou no email pode mandar novamente. Obrigado

  6. Amigo fiz uma montagem aqui desse scripts mais não funciono veja..

    veja como fiz http://ofertasml.com.br/banner/banner.html

    Você não tem como fazer um demo pra mim ver…

    Desde já muito obrigado!

    Daniel

    • Olá Daniel,

      Você criou e colocou as pastas de imagens no lugar correto?

      Tipo:
      http://ofertasml.com.br/banner/images1/banner1.gif
      http://ofertasml.com.br/banner/images1/banner2.gif
      http://ofertasml.com.br/banner/images1/banner3.gif

      Porque chamando aqui o endereço, não está encontrando

  7. Eu não conssigo inserir o banner rotativo no website T.T

    pode me dar uma ajuda ? ‘-’,
    http://www.facebook.com/jean.luiz.73?ref=tn_tnmn

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>