← Tutoriais

[JAVASCRIPT]Banners em Slide

Lida 8050 vezes

Offline

André Freitas 
Membro
Mensagens 941 Gostos 16
Troféus totais: 29
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Muitas vezes deparamo-nos com o problema de organizar os banners no nosso site e com o espaço, para a resolução deste problema podemos fazer passar no mesmo espaço vários banners, fica então o código para tal:

Código: [Seleccione]
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>PUB - BANNERS</title>
</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

<script language="JavaScript1.2">
///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth='468px'
var scrollerheight='60px'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000

//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<a href="link do banner 1"><img src="directório do banner 1" border="0"></a>'
slideimages[1]='<a href="link do banner 2"><img src="directório do banner 2" border="0"></a>'
slideimages[2]='<a href="link do banner 3"><img src="directório do banner 3" border="0"></a>'
//extend this list

///////Do not edit pass this line///////////////////////

var ie=document.all
var dom=document.getElementById

if (slideimages.length>2)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.top=parseInt(scrollerheight)
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.top=parseInt(scrollerheight)
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){
tdiv.style.top=0+"px"
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(second2_obj)",pausebetweenimages)
return
}
if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){
tdiv.style.top=parseInt(tdiv.style.top)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.top=scrollerheight
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){
tdiv2.style.top=0+"px"
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(first2_obj)",pausebetweenimages)
return
}
if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){
tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px"
setTimeout("move4(second2_obj)",50)
}
else{
tdiv2.style.top=scrollerheight
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (ie||dom){
first2_obj=ie? first2 : document.getElementById("first2")
second2_obj=ie? second2 : document.getElementById("second2")
move3(first2_obj)
second2_obj.style.top=scrollerheight
second2_obj.style.visibility='visible'
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.top=parseInt(scrollerheight)+5
document.main.document.second.visibility='show'
}
}

window.onload=startscroll

</script>


<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; visibility=hide>
<layer id="first" left=0 top=1 width=&{scrollerwidth};>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])

</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1])
</script>
</layer>
</ilayer>

<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:1px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px;visibility:hidden">')
document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>
</body>

</html>


var scrollerwidth='468px'
var scrollerheight='60px'

Estas são as dimensões do espaço onde vai aparecer os banners, convem ser do tamanho dos banners .  :P

Sempre que quiseram adicionar mais banners colem sempre este código por baixo:
slideimages[0]='<a href="link do banner 1"><img src="directório do banner 1" border="0"></a>'
Offline

Jogala 
Membro
Mensagens 167 Gostos 0
Troféus totais: 27
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Bom post!

Quem quiser testar: http://jogala.net/banner.html
Offline

Nuno 
Administrador
Mensagens 7780 Gostos 216
Feedback +2

Troféus totais: 42
Trófeus: (Ver todos)
100 Poll Votes Level 7 Search Mobile User Level 6 Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

Muito bom!
Offline

Tjda 
Membro
Mensagens 690 Gostos 9
Troféus totais: 31
Trófeus: (Ver todos)
Mobile User Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Brigadão, ja estou a utilizar  :lol:
Offline

Nuno 
Administrador
Mensagens 7780 Gostos 216
Feedback +2

Troféus totais: 42
Trófeus: (Ver todos)
100 Poll Votes Level 7 Search Mobile User Level 6 Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

O novo +t vai usar :D
Offline

Santo 
Membro
Mensagens 1657 Gostos 4
Troféus totais: 31
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Exit,

Porque é que não usam um programa como deve de ser para a gestão de banners? Não será mais produtivo?

Saudações
Offline

leite 
Membro
Mensagens 864 Gostos 11
Troféus totais: 29
Trófeus: (Ver todos)
Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Sim Santo tem lógica o que dizes e depende com que frequencia irão ser mudados os banners .

O mais engraçado é o efeito que é dado ao mudar os banners .
Offline

Nuno 
Administrador
Mensagens 7780 Gostos 216
Feedback +2

Troféus totais: 42
Trófeus: (Ver todos)
100 Poll Votes Level 7 Search Mobile User Level 6 Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

Citação de: "Santo"
Exit,

Porque é que não usam um programa como deve de ser para a gestão de banners? Não será mais produtivo?

Saudações


Mas vai ser usado com outro intuito e mais trabalhado!
Offline

asturmas 
Administrador
Mensagens 19734 Gostos 49
Feedback +2

Troféus totais: 39
Trófeus: (Ver todos)
Mobile User Windows User Super Combination Combination Topic Starter 100 Poll Votes 50 Poll Votes 10 Poll Votes Poll Voter Poll Starter

4ndr3, bom post!
Offline

pmlc 
Membro
Mensagens 469 Gostos 0
Feedback +2

Troféus totais: 25
Trófeus: (Ver todos)
Level 5 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1

Muito bom Script.
Post bastante útil.