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.
DEMO
Un saludo