Ir para conteúdo

Arquivado

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

godoy89

Slideshow como background no <TD>

Recommended Posts

Alguém sabe como faço pra colocar um slideshow de imagens como FUNDO no <TD> da minha tabela?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, mudar o fundo de um TD é meio bizarro, não acha?

Não seria mais fácil colocar dentro do TD imagens para fazer o slideshow? Não vejo cúmulo nisso.

 

De qualquer forma, estou postando um slideshow muito simples e funcional que encontrei em jonraasch.com:

 

- Primeiro passo: inserir a biblioteca JQuery na página. Para ficar mais rápido, teste com a do Ajax (Google Code)

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

- Segundo: estilizar as imagens, para uma ficar sobreposta à outra (z-index)

 

<style type="text/css">
#slideshow {
	position:relative;
	height:350px;
}

#slideshow IMG {
	position:absolute;
	top:0;
	left:0;
	z-index:8;
}

#slideshow IMG.active {
	z-index:10;
}

#slideshow IMG.last-active {
	z-index:9;
}
</style>

- Terceiro passo: inserir o script que fará o slideshow funcionar

 

<script type="text/javascript">
function slideSwitch() {
	var $active = $('#slideshow IMG.active');

	if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

	var $next = $active.next().length ? $active.next()
 	: $('#slideshow IMG:first');
		
	$active.addClass('last-active'); // O código acima intercala as classes CSS das imagens, fazendo com que uma tome a posição à frente da outra

	$next.css({opacity: 0.0})
 	.addClass('active')
 	.animate({opacity: 1.0}, 1000, function() {
 	$active.removeClass('active last-active');
 	}); // Efeito crossfade (Opacidade 0-1)
}

$(function() {
	setInterval( "slideSwitch()", 5000 ); // Intervalo de transição, em milisegundos
});
</script>

- Quarto passo: inserir a DIV com as imagens

 

<div id="slideshow">
	<img src="http://2.bp.blogspot.com/_BZZfeg5aYcc/R_GRERex-MI/AAAAAAAAIdI/8Io9oZwxVaQ/s200/Now+Thats+What+I+Call+Music+27+%282008%29.jpg" alt="" class="active" />
	<img src="http://1.bp.blogspot.com/_BZZfeg5aYcc/SUBSW7fnSpI/AAAAAAAARhQ/zDIHfUHubxY/s200/Disco+Music+%E2%80%93+Originals.jpg" alt="" />
	<img src="http://upload.wikimedia.org/wikipedia/en/thumb/3/31/British_Sea_Power_Rock_Music.jpg/200px-British_Sea_Power_Rock_Music.jpg" alt="" />
</div>

Bom, é isso, se houver algum erro, me mande PM, por favor. Até mais!

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.