Jump to content
Fórum Script Brasil
  • 0

Como criar uma transição de slides com javascript


julio_sp

Question

Bom pra começar eu num sei nada de javascript, e gostaria de saber como eu crio um transição de slides nesse codigo a ideia é fazer uma transição tipo a do uol naquele painel de noticias como se fosse um alpha do flash.

Eu peguei uns codigos aqui tambem que fazem isso porem eu não sei onde e nem como os encaixar nesse codigo ai de baixo o que devo fazer?

Esse é o codigo e logo la embaixo tem o codigo das transições.

<html>
<head>
<title>Slide Show</title>
&lt;script>
    b=0
    function slideshow()
    {
    switch (b)
    {
    case 0:foto.src="1.jpg";
        break;
    case 1:foto.src="2.jpg";
        break;
    case 2:foto.src="3.jpg";
        break;
    case 3:foto.src="4.jpg";
        break;
    case 4:foto.src="5.jpg";
    b=-1;
    }
    b++;
    }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body bgcolor="#999999" text="#FFFFFF" link="#000000" vlink="#000000" alink="#000000" onLoad="setInterval('slideshow()',1000)";>
<p><img src="lu_tran.gif" name="foto"> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>By <a href="mailto:renanrosa_rr@hotmail.com">Renan Rosa</a></p>
<p>Espero que Gostem</p>
</body>
</html>
Esse o codigo das transições
&lt;script LANGUAGE="JavaScript">
var bannerAD=new Array();
var bannerADlink=new Array();
var adNum=0;

//Pode criar variaveis para usar mais de uma vez
var imagem1 = "paisagem1.jpg";
var imagem2 = "paisagem2.jpg";
var imagem3 = "paisagem3.jpg";

bannerAD[0]="paisagem1.jpg";// ou digitar diretamente em cada item o nome da imagem
bannerADlink[0]="";
bannerAD[1]=imagem2;
bannerADlink[1]="";
bannerAD[2]=imagem3;
bannerADlink[2]="";
bannerAD[3]=imagem1;
bannerADlink[3]="";
bannerAD[4]=imagem2;
bannerADlink[4]="";
bannerAD[5]=imagem3;
bannerADlink[5]="";
bannerAD[6]=imagem1;
bannerADlink[6]="";
bannerAD[7]=imagem2;
bannerADlink[7]="";
bannerAD[8]=imagem3;
bannerADlink[8]="";
bannerAD[9]=imagem1;
bannerADlink[9]="";

var preloadedimages=new Array();
for (i=1;i<bannerAD.length;i++){
preloadedimages[i]=new Image();
preloadedimages[i].src=bannerAD[i];
}
function setTransition(){
if (document.all){
bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
bannerADrotator.filters.revealTrans.apply();
}
}
function playTransition(){
if (document.all)
bannerADrotator.filters.revealTrans.play()
}
function nextAd(){
if(adNum<bannerAD.length-1)adNum++;
else adNum=0;
setTransition();
document.images.bannerADrotator.src=bannerAD[adNum];
playTransition();
theTimer=setTimeout("nextAd()", 5000);
}
function jump2url(){
jumpUrl=bannerADlink[adNum];
jumpTarget='_self';
if (jumpUrl != ''){
if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
else location.href=jumpUrl;
}
}
function displayStatusMsg() {
status=bannerADlink[adNum];
document.returnValue = true;
}
</script>


<BANNERAD><img src="paisagem1.jpg" name="bannerADrotator" style="filter:revealTrans(duration=2,transition=20)" border=0></a>
&lt;script language="JavaScript">nextAd()</script>
</BANNERAD>

Bom se alguém puder me ajudar eu agradeço.

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

hipnos na areia

I cara num funfo não, mas já tinha conseguido dar um jeito provissoriamente consegui colocar uma transição como as do power point da esqueda pra direita

Percebi que se substituir isso

bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
Por isso
bannerADrotator.filters.revealTrans.Transition= Qualquer numero de 0 à 22;

Consigo controlar qual transição eu quero (antes os varios formatos iam aleatoriamente sem eu poder escolher) porem não consigo o tão desejado efeito apha do uol e acredito que não vou conseguir com esse codigo pelo que você me disse.

Enfim como eu disse não manjo nada de javascript mas é isso se você tiver mais alguma ideia por favor poste ai vlw cara!

andreia_sp desculpe a minha inpaciência não vai acontecer novamente

Link to comment
Share on other sites

  • 0
...

Consigo controlar qual transição eu quero (antes os varios formatos iam aleatoriamente sem eu poder escolher) porem não consigo o tão desejado efeito apha do uol e acredito que não vou conseguir com esse codigo pelo que você me disse.

Enfim como eu disse não manjo nada de javascript mas é isso se você tiver mais alguma ideia por favor poste ai vlw cara!

andreia_sp desculpe a minha inpaciência não vai acontecer novamente

você tem que criar uma classe pra imagem no css q recebera

Filter: Alpha(Opacity=10);                 // IE
      -moz-opacity: 0.2;                            // FF/MOZ
      opacity:0.20;                                    // OPERA
    z-index: 2;                                       // Propriedade p/ Sobrepor Layer

/* z-index é um parametro q sobrepõe os itens sendo q 0 sempre fica atras do 1 q fica atras do 2 e assim por diante */

CSS... espero ter ajudado =D

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152k
    • Total Posts
      651.5k
×
×
  • Create New...