Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » Ciclar elementos de una lista

JQuery - Ciclar elementos de una lista

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Manuel

Ciclar elementos de una lista

Publicado por Manuel (3 intervenciones) el 27/09/2015 02:06:40
Hola buenas tardes. Estoy intentando hacer un ciclo con 5 elementos de una lista de manera infinita, el problema es que no se cómo resolverlo. Dejo mi código HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <title>Example</title>
    <link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
 
<body>
    <div id="line"></div>
    <br><br>
    <h2>Lorem ipsum dolor sit amet</h2>
    <br><br>
    <!--div id="wrapper"-->
    <div id="wrapper" class="slider-container">
    	<ul id="slider" class="slider-wrapper">
			<!--li class="slide-current"--><li>
				<img src="img/1.png" id="elem0" class="toBeFaded">
			</li>
            <li>
                <img src="img/2.png" id="elem1" class="toBeFaded">
            </li>
            <li>
                <img src="img/3.png" id="elem2" class="toBeFaded">
            </li>
            <li>
                <img src="img/4.png" id="elem3" class="toBeFaded">
            </li>
            <li>
                <img src="img/5.png" id="elem4" class="toBeFaded">
            </li>
		</ul>
    </div>
 
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/script.js"></script>
 
</body>
 
</html>

y este es el script:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function (){
 
  var yourFade = 1, // the amount of time in seconds that the elements will fade in fade out

  yourDelay = 2, // the amount of time in seconds that there will be a delay between the fade ins and fade outs

  fadeTime = yourFade * 1000, //convert fade seconds to milliseconds (1000)

  delayTime = yourDelay * 1000, // convert delay seconds to milliseconds (2000)

  totalTime = fadeTime + delayTime, //3000 milliseconds...needed for all those delays we talked about

  allElems, // find out exactly how many page elements have the 'toBeFaded' class (4)

  elemNoFade, // Will help us find the last element represent the last element (3)

  i,
  fadingElem;
    //console.log($('.toBeFaded').length);

  for (i = 0, allElems = $('.toBeFaded').length, elemNoFade = allElems - 1; i < allElems; i += 1) {
    fadingElem = "#elem" + i;
    if (i === 0) {
        $(fadingElem).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime);
    } else if (i === elemNoFade) {
        $(fadingElem).delay(totalTime * i).fadeIn(fadeTime);
    } else {
        $(fadingElem).delay(totalTime * i).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime);
    }
  }
});

Se muestran únicamente los 3 primeros elementos de la lista, al desaparecer el de arriba, se recorre el resto. El problema es que si llega al elemento 4, si desaparece este elemento pero no vuelve a aparecer el primer elemento. Dejo tmb mi CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
#line{

    margin:0px auto;
    background-color:#383838;

    width:auto;
    height:10px;
}
 
* {
    margin:0px;
    padding:0px;
}
 
body{
    background-color:#dddddd;   

    margin:0;
}
 
h2{
    font-family:Georgia, sans-serif;
    text-align: center;
}
 
ul {
    list-style-type: none;
}
 
li img{
    left: 8%;
    position: relative;
    margin-top: 40px;
}
 
/**

 * Contendor del Slider

 ----------------------------------------*/
.slider-container {
    margin: 0 auto;
    width: 940px;
    height: 560px;
    background-image:url(../img/container.png);
}
 
.slider-wrapper {
    position: relative;
    z-index: 90;
    height: 100%;
    overflow: hidden;
}

Espero me puedan ayudar. Saludos
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder