Slide automático

[LeoO_DF 22]

Eu to fazendo um Slide, com o Banco de dados, e eu fiz o seguinte, eu ponho todas as imagens como background de uma <li></li>, e seto a opacidade delas para 0, e deixa apenas a primeira visível, agora eu quero saber como mudar isso automaticamente sem precisar criar uma ordem especifica, eu quero que ele cheque em todas as <li></li> e verificar a que está visivel no momento, setar a opacidade dela para 0 e aproximo para 1, eu pensei em usar o .each(), eu consegui fazer isso:

$(function(){
	setTimeout(function(){
		$("div#Conteudo header#Theme-Header div#Slide ul#Imagens li").each(function(){
        	if($(this).is(':visible'))
			{
				
			}
		});
	}, 2000);
});

Ele verifica em todas as <li></li>, verifica se ela está visivel e torna ela invisivel, agora preciso que ele torne a proxima li, depoism desta ai visivel, e essa por diante, até voltar todas as li, desdo do início.

 

Código PHP:

<ul id="Imagens">
	<?php
	$SQL = mysql_query("SELECT * FROM `slider_home`") or die(mysql_error());
	if(mysql_num_rows($SQL)):
		while($Info_Slide = mysql_fetch_array($SQL)):
			?>
            <li data-slide="slider-nav-<?=$Info_Slide['id']?>" style="background:url(Administrativo/Conteudo/Imagens/Site/Usuarios/Sliders/Lobby/<?=$Info_Slide['url']?>) no-repeat top center;"></li>
            <?php
		endwhile;
	else:
		echo "Ocorreu um Problema!";
	endif;
	?>
</ul>

[William Bruno 1501]

Vc não precisa saber qual está visivel explicitamente.

 

lembre-se que cada LI é um elemento do DOM, e #Imagens li será um array.

Então percorra como array, com uma variável contadora i

[LeoO_DF 22]

Vc não precisa saber qual está visivel explicitamente.

 

lembre-se que cada LI é um elemento do DOM, e #Imagens li será um array.

Então percorra como array, com uma variável contadora i

Não entendi muito bem, eu não tenho um grande conhecimento em javascript, bom meu código atualmente está assim:

var Slide = setTimeout(function(){
		$("div#Conteudo header#Theme-Header div#Slide ul#Imagens li").each(function(){
        	if($(this).is(':visible'))
			{
				$(this).css("opacity", "0");
			}
		});
	}, 2000);

 

ele ja torna a atual imagem invisivel falta apenas torna a proxima visivel, caso existe uma proxima

[William Bruno 1501]

Vc tá pensando da forma mais complicada possível..

 

Olha uma muito mais simples:

-> A cada iteração do setInterval deixe todas invisíveis.

-> Depois disso, deixe visível a imagem que vc quer.

[LeoO_DF 22]

Vc tá pensando da forma mais complicada possível..

 

Olha uma muito mais simples:

-> A cada iteração do setInterval deixe todas invisíveis.

-> Depois disso, deixe visível a imagem que vc quer.

Mais como eu posso criar um Ciclo para que as imagens vão cada uma em sua ordem se tornando visível, dando de começo a primeira, indo para a segunda, terceira e assim por diante até todas terem se tornado visíveis o tempo extipulado e retornado a primeira imagem novamente?

 

Consegui:

setInterval(function(){
		$('div#Conteudo header#Theme-Header div#Slide ul#Imagens li:first').animate({'opacity':0}, 200, function () {
    		$(this).appendTo($('div#Conteudo header#Theme-Header div#Slide ul#Imagens')).css('opacity', 1);
		});
	}, 6000);

[William Bruno 1501]

através da variável contadora i como falei no primeiro post.

 

Inicie o i com 0, e faça um i++ a cada iteração do setInterval. Cuidado apenas para não deixar o i assumir um valor maior que o total de slides.