Autor
|
Tema: ¿Dónde falla este script para slide con jQuery? (Leído 7,525 veces)
|
Linton
Desconectado
Mensajes: 239
|
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! $(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(); }); }); }); }); }); } });
|
|
« Última modificación: 15 Marzo 2014, 10:40 am por Linton »
|
En línea
|
|
|
|
Maurice_Lupin
Desconectado
Mensajes: 356
GPS
|
|
|
|
En línea
|
Un error se comete al equivocarse.
|
|
|
Linton
Desconectado
Mensajes: 239
|
Gracias, voy a verlo.
|
|
|
En línea
|
|
|
|
Linton
Desconectado
Mensajes: 239
|
Bien, esto es el código: // 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.
|
|
|
En línea
|
|
|
|
Maurice_Lupin
Desconectado
Mensajes: 356
GPS
|
Sólo tenias que buscar info sobre eq()https://api.jquery.com/eq/
//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.
|
|
« Última modificación: 16 Marzo 2014, 21:51 pm por Maurice_Lupin »
|
En línea
|
Un error se comete al equivocarse.
|
|
|
Linton
Desconectado
Mensajes: 239
|
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.
|
|
|
En línea
|
|
|
|
alan++
Desconectado
Mensajes: 57
|
$(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 ... $(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
Mensajes: 239
|
¡Hola Allan! Pues tampoco Igual que el otro: ejecuta el ciclo UNA vez, y se detiene. No hay bucle.
|
|
|
En línea
|
|
|
|
#!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.<!doctype html> <style type="text/css">.slider-item {display:none;} </style> <!-- 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>
Código JS$(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.aspConsejo, 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
Mensajes: 239
|
¡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
|
|
|
|
|
Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
[BATCH] Donde falla este script. Alguien me puede ayudar?. Gracias.
Scripting
|
legolas266
|
5
|
6,235
|
14 Marzo 2013, 13:28 pm
por Eleкtro
|
|
|
[Bash] Alguien me dice donde falla donde me falla este codigo?
Scripting
|
legolas266
|
5
|
4,136
|
4 Julio 2013, 15:01 pm
por MineHitex
|
|
|
[Bash Script] Ayuda por favor. Donde falla esta linea de codigo.
Scripting
|
legolas266
|
1
|
2,560
|
31 Mayo 2013, 13:11 pm
por legolas266
|
|
|
[Aporte] Slide-Jquery
Desarrollo Web
|
TrokaMc
|
4
|
2,457
|
19 Diciembre 2013, 09:19 am
por TrokaMc
|
|
|
[Pregunta tipica] Que falla en este script?
Python
|
davoker
|
7
|
5,107
|
15 Junio 2016, 21:17 pm
por davoker
|
|