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();
});
});
});
});
});
}
});
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.
Gracias, voy a verlo.
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.
Sólo tenias que buscar info sobre eq()
https://api.jquery.com/eq/
<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>
//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 ;D
Saludos.
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.
$(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!
¡Hola Allan! :)
Pues tampoco :huh: Igual que el otro: ejecuta el ciclo UNA vez, y se detiene. No hay bucle.
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>
<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
$(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
¡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.
$(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!
¡Muchas gracias, un abrazo! :)