Cita:
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
:
Ver original//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>