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
Mostrar Mensajes