Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rafael rosendo

Slide de imagens

Por , em Javascript

Recommended Posts

rafael rosendo    0

rafael rosendo
Postado

Pessoal estou aqui pedido a ajuda de alguem que me ajude na seguinte coisa

 

Peguei na net um script de slide show.... mas o que acontece...

O script faz tudo, tipo, avança imagem, retorna imagem, e roda a imagem.., so que no script esta faltando a seguinte coisa... na hora que eu dou um start para as imagens começarem a passar sozinha, não tem como você dar um stop para as imagens pararem de rodar.... Pessoal eu preciso da ajuda de vocês me ajudem isso é urgentissimo....

 

Como é que eu faço as imagens pararem????

 

O código esta a baixo::

 

 

 

<html><head><title>PushButton SlideShow</title><!-- Set up the caption font in the following style.Also set the styles for the controls.Place the style script in the head of the page.//--><style>.Caption {font-family: Arial;font-weight: normal;font-size:  12pt;color:      #FF3300; }A.Controls:link    { color:#666666;                     text-decoration:none;                     font-family: Arial;                     font-size:   14pt;                     font-weight: bold; }A.Controls:visited { color:#666666; text-decoration:none;                      font-family: Arial;                     font-size:   14pt;                     font-weight: bold; }A.Controls:active  { color:#666666; text-decoration:none;                     font-family: Arial;                     font-size:   14pt;                     font-weight: bold; }A.Controls:hover   { color:#00FF00; text-decoration:none;                     font-family: Arial;                     font-size:   14pt;                     font-weight: bold; }</style><!-- Place the following script in the head of the page.Follow the set-up instructions within the script.//--><script>// (C) 2003 by CodeLifter.com// Free for all users, but leave in this header.// ==============================// Set the following variables...// ==============================// Set the slideshow speed (in milliseconds)var SlideShowSpeed = 3000;// Set the duration of crossfade (in seconds)var CrossFadeDuration = 2;var Picture = new Array(); // don't change thisvar Caption = new Array(); // don't change thisvar showHot = false;       // don't change this// Specify the image files...// To add more images, just continue// the pattern, adding to the array below.// To use fewer images, remove lines// starting at the end of the Picture array.// Caution: The number of Pictures *must*// equal the number of Captions!Picture[1]  = 'Nebula01.jpg';Picture[2]  = 'Nebula02.jpg';Picture[3]  = 'Nebula03.jpg';Picture[4]  = 'Nebula04.jpg';Picture[5]  = 'Nebula05.jpg';Picture[6]  = 'Nebula06.jpg';Picture[7]  = 'Nebula07.jpg';Picture[8]  = 'Nebula08.jpg';Picture[9]  = 'Nebula09.jpg';Picture[10] = 'Nebula10.jpg';// Specify the Captions...// To add more captions, just continue// the pattern, adding to the array below.// To use fewer captions, remove lines// starting at the end of the Caption array.// Caution: The number of Captions *must*// equal the number of Pictures!Caption[1]  = "This is the first caption.";Caption[2]  = "This is the second caption.";Caption[3]  = "This is the third caption.";Caption[4]  = "This is the fourth caption.";Caption[5]  = "This is the fifth caption.";Caption[6]  = "This is the sixth caption.";Caption[7]  = "This is the seventh caption.";Caption[8]  = "This is the eighth caption.";Caption[9]  = "This is the ninth caption.";Caption[10] = "This is the tenth caption.";// =====================================// Do not edit anything below this line!// =====================================var tss;var iss;var jss = 1;var pss = Picture.length-1;var preLoad = new Array();for (iss = 1; iss < pss+1; iss++){preLoad[iss] = new Image();preLoad[iss].src = Picture[iss];}function runSlideShow(){if (document.all){document.images.PictureBox.style.filter="blendTrans(duration=2)";document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";document.images.PictureBox.filters.blendTrans.Apply();}document.images.PictureBox.src = preLoad[jss].src;if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];if (document.all) document.images.PictureBox.filters.blendTrans.Play();jss = jss + 1;if (jss > (pss)) jss=1;tss = setTimeout('runSlideShow()', SlideShowSpeed);}function control(how){if (showHot){if (how=="H") jss = 1;if (how=="F") jss = jss + 1;if (how=="B") jss = jss - 1;if (how=="I") runSlideShow();if (jss > (pss)) jss=1;if (jss < 1) jss = pss;if (document.all){document.images.PictureBox.style.filter="blendTrans(duration=2)";document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";document.images.PictureBox.filters.blendTrans.Apply();}document.images.PictureBox.src = preLoad[jss].src;if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];if (document.all) document.images.PictureBox.filters.blendTrans.Play();}}</script></head><!--Add onload='showHot=true;' to the body tag.  This isneeded to prevent false object calls while the pageis loading. Optional: If you are using this in apopup, as in this demo, adding self.focus() to theonload event in the body tag will bring the popupto the front each time it is loaded [recommended]. //--><body onload='showHot=true;self.focus();' bgcolor=#000000 link="#FF0000" vlink="#FF0000" alink="#FF0000"><!--The following table holds the images, captions, and controls.Place the table in your page where you want the slideshowto appear.  Follow the instructions for each table cell.//--><div align="center">  <center><table border=0 cellpadding=10 cellspacing=0>  <tr>    <!--    The next table cell holds the images.    Set cell and image width and height the same.    The img src must have name=PictureBox in its    tag.  Often, the first image in the Picture    array in the script is used here; but you    may also use a different, introductory image    as we have here, since this image is shown    only on start-up.    //-->    <td width=350 height=280 colspan="3">    <img src=Nebula00.gif name=PictureBox width=350 height=280>    </td>  </tr>  <tr>    <!--     The next table cell holds the captions.    This table cell must have id=CaptionBox and    class=Caption in its tag. The default caption    shows whilst loading in all browsers; NS4    will show only the default caption, throughout.    //-->    <td id=CaptionBox class=Caption align=center colspan="3">    This is the default caption.    </td>  </tr>    <!--    The following three cells contain the controls.    Each of the control a href's must contain class=    Controls, to attach the styles (see top of script).    To dress this up a bit, you can of course substitute    <img src> images for the text in the links.    //-->  <tr>    <td align="center">    <a class=Controls href="#" onClick="javascript:control('B');">< <</a>    </td>    <td align="center">    <a class=Controls href="#" onClick="javascript:control('I');">| | |</a>    </td>    <td align="center">    <a class=Controls href="#" onClick="javascript:control('F');"><b>> ></b></a>    </td>    <td align="center">    </td>  </tr>  </table>  </center></div></body></html>--------------------------------------------------------------------------------

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alex Hiroshi    7

Alex Hiroshi
Postado

Pelo que entendi do script, ele chama uma funcao que vai mudando a um certo tempo usando o setTimeout(), entao bastaria você parar o setTimeout()... para parar ele, você usa o clearTimeout()...

adicione isso no seu script 

function para(){clearTimeout(tss);}
pode ficar perto da funcao que ele usa..

function runSlideShow(){

if (document.all){

document.images.PictureBox.style.filter="blendTrans(duration=2)";

document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";

document.images.PictureBox.filters.blendTrans.Apply();

}

 

document.images.PictureBox.src = preLoad[jss].src;

if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];

if (document.all) document.images.PictureBox.filters.blendTrans.Play();

jss = jss + 1;

if (jss > (pss)) jss=1;

tss = setTimeout('runSlideShow()', SlideShowSpeed);

}

function para(){

clearTimeout(tss);

}

depois é so fazer um link

<a class=Controls href="#" onClick="javascript:para();"> Para </a>
isso resolve o seu problema :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

patricias    0

patricias
Postado

Pessoal, é a primeira vez q posto por aqui....surgiu uma duvida.

To utilizando esse script, e ta funcionando belezinha, mas queria saber se tem como adapta-lo de modo que ele pegue as imagens dentro do banco, tem como?

Tipo pelo q percebi eu tenho q colocar as imagens manualmente dentro do arquivo, tem algum macete de forma que ele pegue automaticamente do banco, ou do proprio diretorio????

 

 

valeu!!!

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

sadboar    0

sadboar
Postado

talvez se você fizer o javascript dentro do php seria facil de colocar imagens de um bancovocê da um echo no codigo js e puxa as imagens do banco montando as linhas do codigo q exigem o nome delas.

Compartilhar este post

Link para o post
Compartilhar em outros sites

biano_cba    0

biano_cba
Postado

Pessoal,Esse script pode ser u sado para chamar noticias també, com ono site do msn.com, mas precisaria ter link cada imgem também.Se algume souber como fazer, ai o script fica mais bacana ainda.Valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito