Ir para conteúdo

POWERED BY:

Arquivado

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

Thiago Lino

slideshow

Por , em Javascript

Recommended Posts

Thiago Lino    0

Thiago Lino
Postado

Oi pessoal, estou com esse código ai de um slideshow, to precisando muito e eu gostei legal desse pois é simples mais bem funcional e só precisa dar uma melhorada, porém não a minha dificuldade não é o design é o código e eu não muito de javascript ou melhor dizendo nada, então espero que vocês me ajudem.

 

+ou- no meio do código estão as imagens com seu formato ou melhor seu endereço, ja fiz de tudo para a imagens serem exibidas e não consigo, lembrando que estão todas as imagens no mesmo diretorio do arquivo html.

 

agradeço!

 

<!--

SlideShow with Captions and Cross-Fade
(C)2002 by CodeLifter.com

Shows images and accompanying captions.
Browsers: NS4-7,IE4-6
Fade effect only in IE; degrades gracefully.
NS4 shows default caption only.

INSTRUCTIONS:

Copy this entire script into a completely blank
page.  Follow the commented instructions within.

//-->

<html>

<head>

<!-- 
Set up the caption font in the following style.
Place the style script in the head of the page.
//-->

<style>
.Caption {
font-family: Arial;
font-weight: bold;
color:      #123456;
}
</style>

<!-- 
Place the following script in the head of the page.
Follow the set-up instructions within the script.
//-->

<script>

// (C) 2002 www.CodeLifter.com
// http://www.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 = 3;

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this

// ESPECIFIQUE SUAS IMAGENS NOS NOMES ABAIXO
// 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]  = 'fotos/Image001.jpg';
Picture[2]  = 'Image002.jpg';
Picture[3]  = 'Image003.jpg';
Picture[4]  = 'Image004.jpg';
Picture[5]  = 'Image005.jpg';
Picture[6]  = 'Image006.jpg';
Picture[7]  = 'Image007.jpg';
Picture[8]  = 'Image008.jpg';
Picture[9]  = 'Image009.jpg';
Picture[10] = 'Image010.jpg';

// ESPECIFIQUE A LEGENDA DE CADA IMAGEM
// 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);
}

</script>

</head>

<!--
Add the onload=runSlideShow() event call to the body tag.
//-->

<body onload=runSlideShow() bgcolor=#000000>

<!--
The following table holds the images and captions.
Place the table in your page where you want the slideshow
to appear.  Follow the instructions for each table cell.
//-->

<table border=0 cellpadding=0 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.  Usually the first image in the Picture
    array in the script is used here.
    //-->
    <td width=350 height=280>
    <img src=Image001.jpg 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 bgcolor=#fedcba>
    This is the default caption.
    </td>
  </tr>
</table>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dee    0

Dee
Postado 

<body onload='runSlideShow()' bgcolor='#000000'>
<table border='0' cellpadding='0' cellspacing='0'>
  <tr>
    <td width=350 height=280>
    <img src='Image001.jpg' name='PictureBox' width='350' height='280'>
    </td>
  </tr>
  <tr>
    <td id='CaptionBox' class='Caption' align='center' bgcolor='#fedcba'>
    </td>
  </tr>
</table>
</body>

Se você colocar aspas funciona!

 

E aqui:

<script>
Coloque assim:

<script type='text/javascript'>

E aqui:

<style>

Coloque assim:

<style type='text/css'>

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Bom uso da área

 

Atenção:

Este subfórum é destinado apenas para postagem de scripts prontos e testados para auxiliar os demais membros.

Não é permitido a abertura de tópicos com dúvidas. Para isso, use o Fórum de javascript.

 

Atenciosamente Silverfox.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dee    0

Dee
Postado

Bom uso da área

 

Atenção:

Este subfórum é destinado apenas para postagem de scripts prontos e testados para auxiliar os demais membros.

Não é permitido a abertura de tópicos com dúvidas. Para isso, use o Fórum de javascript.

 

Atenciosamente Silverfox.

 

Novo Moderador ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

 

Bom uso da área

 

Atenção:

Este subfórum é destinado apenas para postagem de scripts prontos e testados para auxiliar os demais membros.

Não é permitido a abertura de tópicos com dúvidas. Para isso, use o Fórum de javascript.

 

Atenciosamente Silverfox.

 

Novo Moderador ?

 

Por que a pergunta (já fui moderador por falta de tempo eu sai XD), todos devemos colaborar para o bom uso do forum não concorda amigo?

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Movido para o fórum principal.

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Testei o código e o mesmo está funcionando no Firefox e Chrome.

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