Mi primer programa Slideshow Aprendiendo Javascript

[ckrisdg]

Hola!

Primero saludos a todos.
Les comento que estoy acá intentando aprender a programar.
Estoy nuevito nuevito, por eso les pido paciencia y ayuda, para mi lo más importante no es que salga bien el trabajo ya, sino más bien aprender bien a programar.

Quiero aprovechar a aprender a programar con una clienta que me pidió una página web muy simple.

Acá la pueden ver para entender de qué les hablo.

http://www.colettizeman.com/web/porfolio.html

Ahora que se la mostré así como está me pidió algunos cambios:

A) Que se muestren 4 imágenes en vez de 3 por vez. es decir quedarían solo 3 pase de diapositivas, si me explico bien.
B) Que reaccionen al evento click para pasar de una en una.
C) Que se reproduzcan automáticamente y que si hago click continue reproduciendo desde la próxima.

Bueno, al principio creé todo con funciones muy ineficientes, que es como está ahora subido. Pero ahora que lei un poco los manuales, estoy intentando hacer un programa con bucles y arrays.

Y acá van mis peticiones:

A) ¿Cómo debería ser la lógica del pseudocódigo?
B) Tuve un problema con los arrays y me molesta no comprenderlo y no encuentro documentación al respecto:

Quiero crear un ARRAY, que contenga mis doce divs. cada uno con su id.

Pero luego quiero llamar sólo a 4 POSICIONES del ARRAY.
ya que quiero utilizar bloques de 4 divs que aparezcan o desaparezcan del DOM.

Pero no consigo esto, ya que cuando llamo a los mismos a través de un alert o por consola me devuelve que es erróneo, nulo, o que no está definido.

(Aclaro que el script se ejecuta al final)

la rama html sería algo así:

<div id="contenedor">

<div id="divuno" class="mostrar"></div>
<div id="divdos" class="mostrar"></div>
<div id="divtres" class="mostrar"></div>
<div id="divcuatro" class="mostrar"></div>

<div id="divcinco" class="ocultar"></div>
<div id="divseis" class="ocultar"></div>
<div id="divsiete" class="ocultar"></div>
<div id="divocho" class="ocultar"></div>

<div id="divnueve" class="ocultar"></div>
<div id="divdiez" class="ocultar"></div>
<div id="divonce" class="ocultar"></div>
<div id="divdoce" class="ocultar"></div>
</div>

Mientras que la línea que selecciona a los divs sería la siguiente:

var a = [];

a = document.getElementById('contenedor').getElementsB yTagName('div');

console.log(a);

Sé que con a.lenght podría saber la cantidad de posiciones, pero supongamos que yo quiero sustraer de todas las posiciones las posiciones [0,1,2,3] y guardarlas en otra variable o utilizarlas, ¿Puedo hacer esto?

Podría hacer algo como?:

var b = [];
var b = a[0,1,2,3];

Bueno, eso es todo, los dejo en paz.

PD: Me pueden insultar por los horrores de in-eficiencia de código, todo es bienvenido en el aprendizaje. Saludos:

[Alexis88]

Una forma de hacer esto consiste en tener solo la cantidad de elementos que vas a mostrar y las imágenes las irías reemplazando en cada elemento conforme se va avanzando en el array.

Para tu caso, podrías tener cuatro elementos <img> y un array con las rutas y nombres de las 12 imágenes; luego, las tomas en grupos de a cuatro utilizando una variable contadora, la cual inicialmente tendrá el valor cero (para tomar al primer elemento del array) y volverá a tener dicho valor cuando se llegue al final.

La dinámica sería así:

Código JavaScript:

//Inicialmente
contador = 0;
 
img1.src = array[contador++];
img2.src = array[contador++];
img3.src = array[contador++];
img4.src = array[contador++];
 
//Cuando empieces a cambiar de imágenes (esto sería una función)
if (contador == total de imágenes){
    contador = 0;
}
 
img1.src = array[contador++];
img2.src = array[contador++];
img3.src = array[contador++];
img4.src = array[contador++];
 

El valor del contador se va incrementando conforme vas tomando cada elemento del array; de esta forma, vas avanzando y tomando al siguiente, pero antes de eso, comprobamos si el valor del contador es igual al total de imágenes, es decir, si ya estamos al final; de ser así, su valor vuelve a ser cero y volvemos a tomar a la primera imagen.

DEMO

Un saludo

[ckrisdg]

Iniciado por Alexis88

Una forma de hacer esto consiste en tener solo la cantidad de elementos que vas a mostrar y las imágenes las irías reemplazando en cada elemento conforme se va avanzando en el array.

Para tu caso, podrías tener cuatro elementos <img> y un array con las rutas y nombres de las 12 imágenes; luego, las tomas en grupos de a cuatro utilizando una variable contadora, la cual inicialmente tendrá el valor cero (para tomar al primer elemento del array) y volverá a tener dicho valor cuando se llegue al final.

La dinámica sería así:

Código JavaScript:

//Inicialmente
contador = 0;
 
img1.src = array[contador++];
img2.src = array[contador++];
img3.src = array[contador++];
img4.src = array[contador++];
 
//Cuando empieces a cambiar de imágenes (esto sería una función)
if (contador == total de imágenes){
    contador = 0;
}
 
img1.src = array[contador++];
img2.src = array[contador++];
img3.src = array[contador++];
img4.src = array[contador++];
 

El valor del contador se va incrementando conforme vas tomando cada elemento del array; de esta forma, vas avanzando y tomando al siguiente, pero antes de eso, comprobamos si el valor del contador es igual al total de imágenes, es decir, si ya estamos al final; de ser así, su valor vuelve a ser cero y volvemos a tomar a la primera imagen.

[URL="https://jsbin.com/toxage/edit?output"]DEMO[/URL]

Un saludo

Hola gracias por responder, la verdad no entiendo mucho lo que me decís, pero de todas maneras ya me encasille en lograr hacer esto porque hace DÍAS que estoy con esta función y ya quiero que me salga por orgullo propio (jaja) ,

Modifique un poco el código javascript pero no me reconoce una función bucleMuestra() que acabo de crear, no entiendo por qué, a ver si me podés ayudar por favor!

Va el codigo

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Coletti.Zeman Arquitectas</title>
<link rel="stylesheet" href="css/600/porfolio600.css">
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300,200' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Catamaran:200,100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!--<script src="js/main.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body').hide();
$('body').fadeIn(2000);
});
</script>-->



</head>
<body onload=script();>
<div id="todocentrado">
<header>
<div id="contienelogo">
<div id="uno"><a href="index.html"><h1>ESTUDIO</h1></a></div>
<div id="dos">de diseño</div>
<div id="tres"><h2>deco arquitectura</h2></div>
</div>
<div id="cuatro"><h3>COLETTI.ZEMAN.ARQUITECTAS</h3></div>
</header>

<ul id="eventos">
<li id="liuno" class="activa" ><i class="fa fa-circle"></i></li>
<li id="lidos" class="noactiva" ><i class="fa fa-circle"></i></li>
<li id="litres" class="noactiva" ><i class="fa fa-circle"></i></li>

</ul>

<div id="contenedor">

<div id="divuno" class="mostrar"></div>
<div id="divdos" class="mostrar"></div>
<div id="divtres" class="mostrar"></div>
<div id="divcuatro" class="mostrar"></div>


<div id="divcinco" class="ocultar"></div>
<div id="divseis" class="ocultar"></div>
<div id="divsiete" class="ocultar"></div>
<div id="divocho" class="ocultar"></div>



<div id="divnueve" class="ocultar"></div>
<div id="divdiez" class="ocultar"></div>
<div id="divonce" class="ocultar"></div>
<div id="divdoce" class="ocultar"></div>


</div>
<div id="contenedordos">
<section id="sectionuno">
<nav id="botonera">
<ul id="ulbotonera">
<li><a href="index.html">.home</a></li>
<li><a href="concepto.html">.concepto</a></li>
<li class="actual"><a href="porfolio.html">.porfolio</a></li>
<li><a href="servicios.html">.servicios</a></li>
<li><a href="contacto.html" >.contacto</a></li>
</ul>
</nav>
</section>
<section id="sectiondos">
<nav id="social">
<a href="https://www.facebook.com" target="_blank"><div id="facebook"></div></a>
<a href="https://es.pinterest.com/" target="_blank"><div id="pinterest"></div></a>
<a href="https://instagram.com/" target="_blank"><div id="instagram"></div></a>
</nav>
</section>
</div>

<footer class="limpiar"><p id="pie">Coletti.Zeman todos los derechos reservados.Programación Web: <a href="www.madein.com.ar">MadeinHeaven</a></p>
</footer>
</div>
<script type="text/javascript">

var a = [];
a = document.getElementById('contenedor').getElementsB yTagName('div');

function bucleMuestra() {

var i;

for (var i = 0; i < a.lenght ; i++) {
if (a[i].className == 'mostrar') {
a[i].className = 'ocultar'
} else {
if (a[i].className == 'ocultar') {
a[i].className = 'mostrar'
}
}
}

}

var myVar = setInterval(function(){ bucleMuestra() }, 1000);


</script>

</body>
</html>

[Alexis88]

La propiedad para obtener el total de elementos de la lista de nodos es length, no "lenght". Además, sería mejor que tomaras solo a los <div> que desees afectar, pues, de la forma en la que lo haces, tomas a todos los que hay en el documento, con lo cual terminas haciendo iteraciones de más.

Un saludo