jquery slide personalizado

torturo · #1 (**permalink**) 01/11/2013, 23:00

hola a todo!
pues verán, con eso de que no conozco mucho de jquery o JS, no conozco los comandos y como funcionan, por lo que les solicito una ayuda que es la siguiente:
tengo el script que lo dejo a continuación en donde explico que no está completo, pero lo que quisiera que pasara es lo siguiente:
quisiera que las imagenes cambiaran cada cierta cantidad de segundos, si se fijan, le puse LI
pero es sólo un ejemplo, pueden ser úncamente las IMGS encerradas en un DIV
ahora bien, no sé como podría hacerle para que se puedan mostrar de la manera que ya expliqué, y así como lo tengo no sé como hacer para que funcione correctamente...
espero que alguien me pueda apoyar en esto... imagino que para la mayoría esto que quisiera no es algo muy complicado...
saludos!

Cita:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
//$('#pero img').css('display','none');
$('html').click( function (){
var cuantos = $('#pero li').size();

for( var num=1; num<=cuantos; num++)
{
$('#pero img').index(num).css('display','block').fadeIn('sl ow').delay(3000);
$('#pero img').index(num).css('display','none').fadeIn('slo w');
}
});
});
</script>

</body>
<ul id="pero">
<li><img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash2/s720x720/550495_10151519797586535_1122262093_n.jpg"</li>
<li><img src="https://scontent-a-ord.xx.fbcdn.net/hphotos-prn1/s720x720/64118_10151519797606535_292392359_n.jpg"</li>
<li><img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-frc3/s720x720/486092_10151519797201535_681827113_n.jpg"</li>
<li><img src="https://scontent-b-ord.xx.fbcdn.net/hphotos-frc1/s720x720/421824_10151519798731535_830268676_n.jpg"</li>
</ul>
</html>

newboy_master · #2 (**permalink**) 02/11/2013, 08:08

Tu solución puede ser "setInterval":

http://www.jquery4u.com/jquery-funct...erval-example/

Salu2.

torturo · #3 (**permalink**) 02/11/2013, 11:13

hola newboy_master,,, Gracias por el apoyo, ahora bien... no sé como funciona... como comenté anteriormente, soy nuevo en esta cosa y no conozco todo como funciona con JS o Jquery...
me podrías explicar por favor?

newboy_master · #4 (**permalink**) 09/11/2013, 14:33

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
 
    $('#pero').css('position','relative');
    $('#pero img').css('position','absolute',"left","0","top","0");
    $('#pero img:gt(0)').hide();
    setInterval(function(){
      $('#pero :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('#pero');}, 
      3000); // 3 segundos para cada cambio
 
});
</script>
 
</head>
<body>
 
    <div id="pero">
        <img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash2/s720x720/550495_10151519797586535_1122262093_n.jpg" />
        <img src="https://scontent-a-ord.xx.fbcdn.net/hphotos-prn1/s720x720/64118_10151519797606535_292392359_n.jpg" />
        <img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-frc3/s720x720/486092_10151519797201535_681827113_n.jpg" />
        <img src="https://scontent-b-ord.xx.fbcdn.net/hphotos-frc1/s720x720/421824_10151519798731535_830268676_n.jpg" />
    </div>
 
</body>
 
</html>