elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: ¿Eres nuevo? ¿Tienes dudas acerca del funcionamiento de la comunidad? Lee las Reglas Generales


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  ¿Dónde falla este script para slide con jQuery?		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: ¿Dónde falla este script para slide con jQuery?  (Leído 7,440 veces)
Linton

Desconectado Desconectado

Mensajes: 239



Ver Perfil
¿Dónde falla este script para slide con jQuery?
« 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. });
« Última modificación: 15 Marzo 2014, 10:40 am por Linton » En línea
Maurice_Lupin


Desconectado Desconectado

Mensajes: 356

GPS


Ver Perfil WWW
Re: ¿Dónde falla este script para slide con jQuery?
« Respuesta #1 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.
En línea
Un error se comete al equivocarse.
Linton

Desconectado Desconectado

Mensajes: 239



Ver Perfil
Re: ¿Dónde falla este script para slide con jQuery?
« Respuesta #2 en: 16 Marzo 2014, 07:27 am »
Gracias, voy a verlo.
En línea
Linton

Desconectado Desconectado

Mensajes: 239



Ver Perfil
Re: ¿Dónde falla este script para slide con jQuery?
« Respuesta #3 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.
En línea
Maurice_Lupin


Desconectado Desconectado

Mensajes: 356

GPS


Ver Perfil WWW
Re: ¿Dónde falla este script para slide con jQuery?
« Respuesta #4 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.
« Última modificación: 16 Marzo 2014, 21:51 pm por Maurice_Lupin » En línea
Un error se comete al equivocarse.
Linton

Desconectado Desconectado

Mensajes: 239



Ver Perfil
Re: ¿Dónde falla este script para slide con jQuery?
« Respuesta #5 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.
En línea
alan++

Desconectado Desconectado

Mensajes: 57


Ver Perfil
Re: ¿Dónde falla este script para slide con jQuery?
« Respuesta #6 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!
En línea
Linton

Desconectado Desconectado

Mensajes: 239



Ver Perfil
Re: ¿Dónde falla este script para slide con jQuery?
« Respuesta #7 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.
En línea
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: ¿Dónde falla este script para slide con jQuery?
« Respuesta #8 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
« Última modificación: 18 Marzo 2014, 11:09 am por #!drvy » En línea
Linton

Desconectado Desconectado

Mensajes: 239



Ver Perfil
Re: ¿Dónde falla este script para slide con jQuery?
« Respuesta #9 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.
En línea
Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[BATCH] Donde falla este script. Alguien me puede ayudar?. Gracias.
Scripting 		legolas266 5 6,177 Último mensaje 14 Marzo 2013, 13:28 pm
por Eleкtro
[Bash] Alguien me dice donde falla donde me falla este codigo?
Scripting 		legolas266 5 4,088 Último mensaje 4 Julio 2013, 15:01 pm
por MineHitex
[Bash Script] Ayuda por favor. Donde falla esta linea de codigo.
Scripting 		legolas266 1 2,525 Último mensaje 31 Mayo 2013, 13:11 pm
por legolas266
[Aporte] Slide-Jquery
Desarrollo Web 		TrokaMc 4 2,418 Último mensaje 19 Diciembre 2013, 09:19 am
por TrokaMc
[Pregunta tipica] Que falla en este script?
Scripting 		davoker 7 5,058 Último mensaje 15 Junio 2016, 21:17 pm
por davoker
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines