¿Dónde falla este script para slide con jQuery?

[Linton]

Las imágenes se turnan según los intervalos estipulados... una sola vez, no sé cómo convertir la función en bucle   ¿Quién me ayuda? ¡Gracias de antemano!

Código (javascript) [Seleccionar] Expandir

$(document).ready(function(){

$("#im02,#im03,#im04,#im05").css("display","none");

slide();

function slide() {

$("#im01").fadeIn(2000);
$("#im01").delay(2000);
$("#im01").fadeOut(1000);

$("#im01").fadeOut(2000, function(){
$("#im02").fadeIn(2000);
$("#im02").delay(1000);
$("#im02").fadeOut(1000);

$("#im02").fadeOut(2000, function(){
$("#im03").fadeIn(2000);
$("#im03").delay(1000);
$("#im03").fadeOut(1000);


$("#im03").fadeOut(2000, function(){
$("#im04").fadeIn(2000);
$("#im04").delay(1000);
$("#im04").fadeOut(1000);

$("#im04").fadeOut(2000, function(){
$("#im05").fadeIn(2000);
$("#im05").delay(1000);
$("#im05").fadeOut(1000);
$.slide();

});
});
});
});
});
}
});

[Maurice_Lupin]

Podrias utilizar setInterval.

http://stackoverflow.com/questions/10063843/jquery-create-a-loop-that-takes-one-time-interval-at-first-and-then-changes-to?answertab=votes#tab-top

Saludos.

[Linton]

Gracias, voy a verlo.

[Linton]

Bien, esto es el código:

Código (javascript) [Seleccionar] Expandir

  // interval between items
       var itemInterval = 5500;
       var infiniteLoop;//this contains the id of the interval to be used in clearinterval by the way
       setTimeout(function(){
             // this code will run only once, one second after the page loads.
             myFunc();
             infiniteLoop = setInterval(myFunc, itemInterval);
             // commence loop that will run forever unless you use clearinterval(infiniteLoop);
       }, 1000);
       // start loop

       function myFunc() {
           // this code will run every time the function is called
           // initial fade out
           $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

           // set counter
           if (currentItem == numberOfItem -1) {
               currentItem = 0;
           } else {
               currentItem++;
           }

           // next item fade in
           $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

       }

...pero no veo claro el HTML, excepto que las fotos van en el div class="rotating-item". Las fotos deben llevar id según parece (//this contains the id of the interval...), ¿pero cuál? No veo luego # por ninguna parte.

Gracias, un saludo.

[Maurice_Lupin]

Sólo tenias que buscar info sobre eq()
https://api.jquery.com/eq/

Código (html4strict) [Seleccionar] Expandir

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>


Código (javascript) [Seleccionar] Expandir


//pinta de rojo el <li> tercero
$( "li" ).eq( 2 ).css( "background-color", "red" );

En el ejemplo:

numberOfItem : total de divs con class='rotating-item'
currentItem : variable para hacer el slide

Ahora con esto quizá posteo un tuto de slide en mi blog
Saludos.

[Linton]

Es que para mí casi todo en esa ristra es chino, de modo que ni siquiera sabía lo que procede buscar 

Muchas gracias, voy al tajo con ello. Un saludo.

[alan++]

Código [Seleccionar] Expandir

   $(document).ready(function(){
   
   $("#im02,#im03,#im04,#im05").css("display","none");
   
   slide();
   
   function slide() {
   
   $("#im01").fadeIn(2000);
   $("#im01").delay(2000);
   $("#im01").fadeOut(1000);
   
   $("#im01").fadeOut(2000, function(){
   $("#im02").fadeIn(2000);
   $("#im02").delay(1000);
   $("#im02").fadeOut(1000);
   
   $("#im02").fadeOut(2000, function(){
   $("#im03").fadeIn(2000);
   $("#im03").delay(1000);
   $("#im03").fadeOut(1000);
   
   
   $("#im03").fadeOut(2000, function(){
   $("#im04").fadeIn(2000);
   $("#im04").delay(1000);
   $("#im04").fadeOut(1000);
   
   $("#im04").fadeOut(2000, function(){
   $("#im05").fadeIn(2000);
   $("#im05").delay(1000);
   $("#im05").fadeOut(1000);
   $.slide();
   
   });
   });
   });
   });
   });
   }
   });

Mmmm, si lo interpreto... y creo que asi es, probaria con ...

Código [Seleccionar] Expandir

   $(document).ready(function(){
   
   $("#im02,#im03,#im04,#im05").css("display","none");
   
   slide();
   
   function slide() {
   
   $("#im01").fadeIn(2000);
   $("#im01").delay(2000);
   $("#im01").fadeOut(2000, function(){
   $("#im02").fadeIn(2000);
   $("#im02").delay(1000);
   $("#im02").fadeOut(2000, function(){
   $("#im03").fadeIn(2000);
   $("#im03").delay(1000);    
   $("#im03").fadeOut(2000, function(){
   $("#im04").fadeIn(2000);
   $("#im04").delay(1000);
   $("#im04").fadeOut(2000, function(){
   $("#im05").fadeIn(2000);
   $("#im05").delay(1000);
   $("#im05").fadeOut(1000, function(){
   $.slide();
   });    
   });
   });
   });
   });
   }
   });

Suerte!

[Linton]

¡Hola Allan! 

Pues tampoco  Igual que el otro: ejecuta el ciclo UNA vez, y se detiene. No hay bucle.

[#!drvy]

Buenas

Para empezar OLVIDATE de hacerlo de la manera de la que propones al principio. Investiga un poco los bucles y quítate la idea de siquiera pensar en hacerlo de esa forma.

Segundo, el código que te ha mostrado @Maurice_Lupin NO es funcional tal cual. Es un ejemplo (llamemos lo, estructura) de como hacerlo pero no funciona tal cual. Es fácil darse cuenta porque en ningún lado se obtiene/define currentItem y fadeTime. En fin, solo te ha mostrado como hacerlo, no te lo ha dejado para copiar y pegar.

Te voy a dejar un código que acabo de hacer. También te voy a dejar unos enlaces que espero que te mires y aprendas para que te des cuenta de lo que estas haciendo.

Estructura html.

Código (html4strict) [Seleccionar] Expandir

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>POC</title>
<style type="text/css">.slider-item {display:none;}</style>
</head>
<body>
<div id="mi-slider">
<!-- Div de posicionamiento. No usar -->
<div class="slider-item"></div>
<!-- Rellenar a partir de aqui -->
<div class="slider-item">imagen 1</div>
<div class="slider-item">imagen 2</div>
<div class="slider-item">imagen 3</div>
<div class="slider-item">imagen 4</div>
<div class="slider-item">imagen 5</div>
<div class="slider-item">imagen 6</div>
<div class="slider-item">imagen 7</div>
</div>
</body>
</html>

Código JS

Código (javascript) [Seleccionar] Expandir

$(document).ready(function(){
moiSlider('#mi-slider',1000);
});

var moiSlider = (function(identificador,intervalo){
// Si intervalo no esta definido, poner uno por default.
if(intervalo===undefined){var intervalo=5500;}
// Si el identificador no existe, devolver false.
var identi = $(identificador); if(identi.length<1){return false;}
// Coger todos los elementos del slider.
var items = identi.children('.slider-item');
// Coger el elemento actual.
var current = identi.children('.slider-item[slidecur=true]');
// Si el elemento actual no existe o es el ultimo, resetear la cuenta
if(current.length<1||identi.index(current)==items.length){var current = items.eq(0);}
// Timer
setTimeout(function(){
// Ocultar el elemento actual y mostrar el siguente.
current.attr("slidecur","false").fadeOut(300).next().fadeIn(300).attr("slidecur","true");
// volver a llamar esta funcion.
moiSlider(identificador,intervalo);
},intervalo);
});

jQuery index() => http://api.jquery.com/index/
jQuery children() => https://api.jquery.com/children/
jQuery selector con atributos => https://api.jquery.com/attribute-equals-selector/
jQuery eq() => http://api.jquery.com/eq/
jQuery next() => http://api.jquery.com/next/
jQuery attr() => http://api.jquery.com/attr/
javascript setTimeout() => http://www.w3schools.com/jsref/met_win_settimeout.asp

Consejo, lo que puedas hacer en CSS hazlo en CSS en vez de en jQuery. jQuery es muy lento en algunas cosas porque usa bucles a punta pala. Hablo de ocultar todos los items antes de empezar el slider.

Saludos

[Linton]

¡Vaya, muchas gracias! 

Claro, el fadeTime lo cambié, pero en currentItem y otros perendengues ya me perdía porque hay mogollón de funciones internas en jQuery, y yo al menos no sé cuándo estamos ante una expresión genérica y cuándo es una función interna.

De nuevo muchas gracias, me lo empaparé todo. Un saludote.