Ir para conteúdo

POWERED BY:

Arquivado

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

Pedro Castilho

Slideshow em javascript com fade

Recommended Posts

Tenho um slideshow na home de um site, que funciona com javascript, porém preciso que a transição seja com fade, para ficar mais suave. O código é o seguinte:

 

        <div id="banner">
		  <script language="JavaScript">
		  var j,d="",l="",m="",p="",q="",z="",list= new Array()
		  list[list.length]='images/home/01.jpg';
		  list[list.length]='images/home/02.jpg';
		  list[list.length]='images/home/03.jpg';
		  list[list.length]='images/home/04.jpg';
		  j=parseInt(Math.random()*list.length);
		  j=(isNaN(j))?0:j;
		  document.write("<img name='seqSlideShow' src='"+list[j]+"' border=0 >");
		  function seqSlideShow(t,l) {
		  x=document.seqSlideShow;
		  j=l;
		  j++;
		  if (j==list.length) j=0;
		  x.src=list[j];
		  setTimeout("seqSlideShow("+t+","+j+")",t);
		  }
		  </script>
		  <script language="JavaScript"> seqSlideShow(6000,0); </script>
        </div>

 

Essa foi a maneira mais fácil que encontrei, pois com jQuery, ao redimensionar a janela, o slideshow fica "montado" em cima de uma div que está fixa na página. Outro detalhe, é que com o javascript, consigo editar o css, para que a imagem seja redimensionada junto com a janela.

 

#banner img {
	width: 100%;
	height: auto;
}

 

Quem puder ajudar, ou dar uma dica, eu agradeço.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Consegui resolver, quem quiser o código:

 

<div id="banner">
		  <script language="JavaScript">
		  var j,d="",l="",m="",p="",q="",z="",list= new Array()
		  list[list.length]='images/home/01.jpg';
		  list[list.length]='images/home/02.jpg';
		  list[list.length]='images/home/03.jpg';
		  list[list.length]='images/home/04.jpg';
		  j=parseInt(Math.random()*list.length);
		  j=(isNaN(j))?0:j;
		  document.write("<img name='seqSlideShow' src='"+list[j]+"' border=0 >");
		  function seqSlideShow(t,l) {
		  x=document.seqSlideShow;
		  j=l;
		  j++;
		  if (j==list.length) j=0;
		  
		  // Linha antiga
		  //x.src=list[j];
		  
		  // Código novo para Fade Out e Fade In
		  $(x).fadeOut(2000, function() {
			x.src=list[j];
			$(x).fadeIn(2000);
		  });
		  
		  setTimeout("seqSlideShow("+t+","+j+")",t);
		  }
		  </script>
		  <script language="JavaScript"> seqSlideShow(8000,0); </script>
        </div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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