Ir para conteúdo

POWERED BY:

Arquivado

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

William Bruno

[Resolvido] slideshow com pequeno 'bug'

Por , em Javascript

Recommended Posts

William Bruno    1501

William Bruno
Postado

jQuery por si só, já é uma biblioteca muito poderosa, alguns efeitos são básicos, e não é necessário plugin para chegar neles.

Porém, ao desenvolver esse slideshow por 'desafio', barrei em 2 pequenos bugs:

 

-> Para voltar da ultima para a primeira imagem, a transição é feita de forma brusca

-> Ao passar o mouse nas miniaturas, a transição tb é brusca, e o efeito de fade+encobrir a imagem anterior só fica legal qndo o slide tá rodando.

 

Comentei o código, mas está bem simples, até pq foi a primeira vez que fiz algo do tipo:

http://wbruno.com.br/slideshow/

 

<html> 
<head> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
	tg_img( 0 )//começar com a primeira
	$("#palco").css({
		width: '500px',
		height: '320px', //altura da menor das imagens
		overflow: 'hidden' //fazer um crop na imagem, pois para trocar sobrepondo, precisa padronizar
	});
	$("#palco img").css({
		position: 'absolute' //importante para o efeito de uma imagem sobrepor a outra
	});
	/*
	$("#mini").css({
		height: '320px',
		width: '120px',
		overflow: 'auto'
	});
	*/
	$("#mini li a").each(function( i ){
		$(this).attr({rel: i});
	});
	$("#mini li a").click(function( e ){
		e.preventDefault();//evitando que o link funcione
	});
	$("#mini li a").mouseover(function(){
		clearInterval( intervalo );		
		var rel = $(this).attr('rel');
 
		i = parseInt( rel )+1;//garantir que o slideshow recomece da próxima imagem
		if( i > $("#palco img").length-1 ) i = 0;//não deixar o slideshow rodar imagens que não existem
 
		tg_img( rel );//fazendo a troca das imagens
	});
	$("#mini, #palco").mouseover(function(){
		clearInterval( intervalo );//parar o slideshow
	});
	$("#mini, #palco").mouseout(function(){
		intervalo = window.setInterval( 'trocar()', 1500 );//voltar a rodar as imagens
	});
});
var i = 1;//começar mostrando a segunda imagem, pois a primeira aparece estática ao carregar a página
function trocar()
{
	tg_img( i );//fazendo a troca das imagens
	
	i++;//incrementando contador para rodar as imagens
	if( i > $("#palco img").length-1 ) i = 0;//não deixar o slideshow rodar imagens que não existem
}
function tg_img( cont )
{
	$("#palco img").not( $("#palco img").eq( cont-1 ) ).hide();//escondendo todas as imagens menos a anterior
		
	$("#palco img").eq( cont ).fadeIn( 1500, function(){//mostrando a imagem com efeito de fade
		//$("#palco img").eq( cont-1 ).hide();//escondendo a anterior
	});
}
var intervalo = window.setInterval( 'trocar()', 1500 );
</script> 
<style type="text/css"> 
* {
	margin: 0;
	padding: 0;
	list-style: none;
	border: none;
}
#slideshow {
	width: 650px;
	padding: 20px;
}
#mini {
	float: left;
}
#palco {
	position: relative;
	float: right;
	width: 520px;
	overflow: auto;
	height: 500px;
}
</style> 
</head> 
<body> 
	<div id="slideshow"> 
		<ul id="mini"> 
			<li><a href="img/foto1.jpg"><img src="img/foto1_p.jpg" alt="" /></a></li> 
			<li><a href="img/foto2.jpg"><img src="img/foto2_p.jpg" alt="" /></a></li> 
			<li><a href="img/foto3.jpg"><img src="img/foto3_p.jpg" alt="" /></a></li> 
			<li><a href="img/foto4.jpg"><img src="img/foto4_p.jpg" alt="" /></a></li> 
			<li><a href="img/foto5.jpg"><img src="img/foto5_p.jpg" alt="" /></a></li> 
			<li><a href="img/foto6.jpg"><img src="img/foto6_p.jpg" alt="" /></a></li> 
		</ul><!-- mini --> 
		<div id="palco"> 
			<img src="img/foto1.jpg" alt="" /> 
			<img src="img/foto2.jpg" alt="" /> 
			<img src="img/foto3.jpg" alt="" /> 
			<img src="img/foto4.jpg" alt="" /> 
			<img src="img/foto5.jpg" alt="" /> 
			<img src="img/foto6.jpg" alt="" /> 
		</div><!-- /palco --> 
	</div><!-- /slideshow --> 
</body> 
</html>
alguém se habilita ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Shwa    0

Shwa
Postado

ae fera! botei fadeout() em vez de hide() e algumas outras modificações que nem eu lembro

 

<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var intervalo = window.setInterval( 'roll()', 2000 );
	$("#palco").css({
		width: '500px',
		height: '320px', //altura da menor das imagens
		overflow: 'hidden' //fazer um crop na imagem, pois para trocar sobrepondo, precisa padronizar
	});
	$("#palco img").css({
		position: 'absolute', //importante para o efeito de uma imagem sobrepor a outra
		display: 'none' 
	});
	$("#mini li a").each(function( i ){
		$(this).attr( { rel : i } );
	});
	$("#mini, #palco").mouseover(function(){
		clearInterval( intervalo );//parar o slideshow
	});
	$("#mini, #palco").mouseout(function(){
		intervalo = window.setInterval( 'roll()', 2000 );//voltar a rodar as imagens
	});
	$("#mini li a").mouseover(function(){
		clearInterval( intervalo );		
		var rel = $(this).attr('rel');
		change( rel );//fazendo a troca das imagens
	});
	$("#mini li a").click(function( e ){
		e.preventDefault();
	});
});
var i = 0;
function roll()
{
	change( i );
	i = ( i == $("#palco img").length-1 ) ? 0 : i + 1;
	return false;
}
function change( x )
{
	$("#palco img").eq( x ).fadeIn( 500 );
	$("#palco img").not( $("#palco img").eq( x ) ).fadeOut( 500 );
	return false;
}
</script>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	list-style: none;
	border: none;
}
#slideshow {
	width: 650px;
	padding: 20px;
}
#mini {
	float: left;
}
#palco {
	position: relative;
	float: right;
	width: 520px;
	overflow: auto;
	height: 500px;
}
</style>
</head>
<body>
	<div id="slideshow">
		<ul id="mini">
			<li><a href="img/foto1.jpg"><img src="img/foto1_p.jpg" alt="" /></a></li>
			<li><a href="img/foto2.jpg"><img src="img/foto2_p.jpg" alt="" /></a></li>

			<li><a href="img/foto3.jpg"><img src="img/foto3_p.jpg" alt="" /></a></li>
			<li><a href="img/foto4.jpg"><img src="img/foto4_p.jpg" alt="" /></a></li>
			<li><a href="img/foto5.jpg"><img src="img/foto5_p.jpg" alt="" /></a></li>
			<li><a href="img/foto6.jpg"><img src="img/foto6_p.jpg" alt="" /></a></li>
		</ul><!-- /mini -->
		<div id="palco">
			<img src="img/foto1.jpg" alt="" />
			<img src="img/foto2.jpg" alt="" />
			<img src="img/foto3.jpg" alt="" />

			<img src="img/foto4.jpg" alt="" />
			<img src="img/foto5.jpg" alt="" />
			<img src="img/foto6.jpg" alt="" />
		</div><!-- /palco -->
	</div><!-- /slideshow -->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

isso mesmo, boa idéia do fadeOut, só troquei aqui:

 

$("#palco img").eq( cont ).fadeIn( 1500, function(){});
	$("#palco img").not( $("#palco img").eq( cont ) ).fadeOut( 1500 );//escondendo todas as imagens menos a anterior
oque antes era:

$("#palco img").not( $("#palco img").eq( cont-1 ) ).hide();//escondendo todas as imagens menos a anterior
                
        $("#palco img").eq( cont ).fadeIn( 1500 );
e chegou no resultado que esperava.

 

^_^

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