Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Linton en 15 Marzo 2014, 10:38 am


Título: ¿Dónde falla este script para slide con jQuery?
Publicado por: Linton en 15 Marzo 2014, 10:38 am
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
  1. $(document).ready(function(){
  2.  
  3. $("#im02,#im03,#im04,#im05").css("display","none");
  4.  
  5. 	slide();
  6.  
  7. 	function slide() {
  8.  
  9. 	$("#im01").fadeIn(2000);
  10. 	$("#im01").delay(2000);
  11. 	$("#im01").fadeOut(1000);
  12.  
  13. 	$("#im01").fadeOut(2000, function(){
  14. 	$("#im02").fadeIn(2000);
  15. 	$("#im02").delay(1000);
  16. 	$("#im02").fadeOut(1000);
  17.  
  18. 	$("#im02").fadeOut(2000, function(){
  19. 	$("#im03").fadeIn(2000);
  20. 	$("#im03").delay(1000);
  21. 	$("#im03").fadeOut(1000);
  22.  
  23.  
  24. 	$("#im03").fadeOut(2000, function(){
  25. 	$("#im04").fadeIn(2000);
  26. 	$("#im04").delay(1000);
  27. 	$("#im04").fadeOut(1000);
  28.  
  29. 	$("#im04").fadeOut(2000, function(){
  30. 	$("#im05").fadeIn(2000);
  31. 	$("#im05").delay(1000);
  32. 	$("#im05").fadeOut(1000);	
  33. 	$.slide();
  34.  
  35. });
  36. });
  37. });
  38. });
  39. });
  40. }
  41. });

Título: Re: ¿Dónde falla este script para slide con jQuery?
Publicado por: Maurice_Lupin en 15 Marzo 2014, 18:05 pm
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.

Título: Re: ¿Dónde falla este script para slide con jQuery?
Publicado por: Linton en 16 Marzo 2014, 07:27 am
Gracias, voy a verlo.

Título: Re: ¿Dónde falla este script para slide con jQuery?
Publicado por: Linton en 16 Marzo 2014, 08:27 am
Bien, esto es el código:

Código
  1.    // interval between items
  2.         var itemInterval = 5500;
  3.         var infiniteLoop;//this contains the id of the interval to be used in clearinterval by the way
  4.         setTimeout(function(){
  5.               // this code will run only once, one second after the page loads.
  6.               myFunc();
  7.               infiniteLoop = setInterval(myFunc, itemInterval);
  8.               // commence loop that will run forever unless you use clearinterval(infiniteLoop);
  9.         }, 1000);
  10.         // start loop
  11.  
  12.         function myFunc() { 
  13.             // this code will run every time the function is called
  14.             // initial fade out
  15.             $('.rotating-item').eq(currentItem).fadeOut(fadeTime);
  16.  
  17.             // set counter
  18.             if (currentItem == numberOfItem -1) {
  19.                 currentItem = 0;
  20.             } else {
  21.                 currentItem++;
  22.             }
  23.  
  24.             // next item fade in
  25.             $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
  26.  
  27.         }

...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.

Título: Re: ¿Dónde falla este script para slide con jQuery?
Publicado por: Maurice_Lupin en 16 Marzo 2014, 21:46 pm
Sólo tenias que buscar info sobre eq()
https://api.jquery.com/eq/
Código
  1. <ul>
  2. <li>list item 1</li>
  3. <li>list item 2</li>
  4. <li>list item 3</li>
  5. <li>list item 4</li>
  6. <li>list item 5</li>
  7. </ul>	
  8.  

Código
  1. //pinta de rojo el <li> tercero
  2. $( "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 ;D
Saludos.

Título: Re: ¿Dónde falla este script para slide con jQuery?
Publicado por: Linton en 17 Marzo 2014, 08:15 am
Es que para mí casi todo en esa ristra es chino, de modo que ni siquiera sabía lo que procede buscar  :laugh:

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

Título: Re: ¿Dónde falla este script para slide con jQuery?
Publicado por: alan++ en 18 Marzo 2014, 01:40 am
Código:
    $(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:
    $(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!

Título: Re: ¿Dónde falla este script para slide con jQuery?
Publicado por: Linton en 18 Marzo 2014, 08:20 am
¡Hola Allan!  :)

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

Título: Re: ¿Dónde falla este script para slide con jQuery?
Publicado por: #!drvy en 18 Marzo 2014, 10:53 am
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
  1. <!doctype html>
  2. <html lang="en">
  4. 	<meta charset="UTF-8">
  5. 	<title>POC</title>
  6. 	<style type="text/css">.slider-item {display:none;}</style>
  7. </head>
  9. 	<div id="mi-slider">
  10. 		<!-- Div de posicionamiento. No usar -->
  11. 		<div class="slider-item"></div>
  12. 		<!-- Rellenar a partir de aqui -->
  13. 		<div class="slider-item">imagen 1</div>
  14. 		<div class="slider-item">imagen 2</div>
  15. 		<div class="slider-item">imagen 3</div>
  16. 		<div class="slider-item">imagen 4</div>
  17. 		<div class="slider-item">imagen 5</div>
  18. 		<div class="slider-item">imagen 6</div>
  19. 		<div class="slider-item">imagen 7</div>
  20. 	</div>
  21. </body>
  22. </html>

Código JS
Código
  1. $(document).ready(function(){
  2. 	moiSlider('#mi-slider',1000);
  3. });
  4.  
  5. var moiSlider = (function(identificador,intervalo){
  6. 	// Si intervalo no esta definido, poner uno por default.
  7. 	if(intervalo===undefined){var intervalo=5500;}
  8. 	// Si el identificador no existe, devolver false.
  9. 	var identi = $(identificador); if(identi.length<1){return false;}
  10. 	// Coger todos los elementos del slider.
  11. 	var items = identi.children('.slider-item');
  12. 	// Coger el elemento actual.
  13. 	var current = identi.children('.slider-item[slidecur=true]');
  14. 	// Si el elemento actual no existe o es el ultimo, resetear la cuenta
  15. 	if(current.length<1||identi.index(current)==items.length){var current = items.eq(0);}
  16. 	// Timer
  17. 	setTimeout(function(){
  18. 		// Ocultar el elemento actual y mostrar el siguente.
  19. 		current.attr("slidecur","false").fadeOut(300).next().fadeIn(300).attr("slidecur","true");
  20. 		// volver a llamar esta funcion.
  21. 		moiSlider(identificador,intervalo);
  22. 	},intervalo);
  23. });

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

Título: Re: ¿Dónde falla este script para slide con jQuery?
Publicado por: Linton en 18 Marzo 2014, 12:10 pm
¡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.

Título: Re: ¿Dónde falla este script para slide con jQuery?
Publicado por: alan++ en 19 Marzo 2014, 00:37 am
Código:
    $(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();
    });    
    });
    });
    });
    });
    }
    });

Ahora si... me comi un $. que no iba

Abrazo!

Título: Re: ¿Dónde falla este script para slide con jQuery?
Publicado por: Linton en 19 Marzo 2014, 07:52 am
¡Muchas gracias, un abrazo!  :)


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines