Para un array en Javascript la posición -1
no existe, a menos que la definas explicita-mente, también se debe tener en cuenta que si los elementos del DOM no han sido cargados.
var el_array = []
console.log(el_array[-1])
// salida undefined
var el_array = []
el_array[-1] = "algo"
console.log(el_array[-1])
// imprime algo
Para tu caso la variable myIndex
debería iniciar en 1
asi cuando implementes la primera vez x[myIndex-1]
sera equivalente a x[0]
.
Ademas la sentencia document.getElementsByClassName("slides");
retornara undefined
dado que el script se ejecuta antes que se pinten los elementos, para solventar esto puedes:
- Agrega el script al final del documento antes del cierre
</body>
- Usar el evento
DOMContentLoaded
que se ejecuta cuando el HTML del DOM ha sido creado.
Ahora un ejemplo de como quedaría el código completo:
var myIndex = 1;
function animacion() {
var i;
var x = document.getElementsByClassName("slides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex - 1].style.display = "block";
setTimeout(animacion, 2000);
}
document.addEventListener("DOMContentLoaded", function(event) {
// Llama la funcion animacion, cuado esta cargado el DOM
animacion();
});
<li class="slides"> HOLA 1</li>
<li class="slides"> HOLA 2</li>
<li class="slides"> HOLA 3</li>
<li class="slides"> HOLA 4</li>
<li class="slides"> HOLA 5</li>