Afficher des images sans faire disparaitre les précédentes

Bonjour, je me présente : j'ai + de 50 ans, l'informatique n'est pas mon métier, c juste mon passe temps favori... pas fait de formation spécifique, plutôt autodidacte , je comprends (en grande ligne, mais j' utilise) l'HTML, CSS, Javascript.
mais passons à l'essentiel ... :
je voudrais faire un petit diaporama :
une série de petites vignettes (~ 10 - sur la gauche de l'écran par exemple),
puis :
- on clic sur la 1ere vignette et une photo s'affiche sur la droite de l'écran ,
- puis on clic sur la 2eme vignette et une seconde photo s'affiche, juste en dessous de la première photo.
- puis on clic sur la 3eme vignette ..... et ainsi de suite ... jusqu'à ~ 4 affichages de photo, (pour éviter trop ascenseurs)
- donc lorsqu'on cliquera sur la 5eme vignette, la photo correspondante prendra la place de la première photo affichée.

je me suis débrouillée avec la fonction javascript :

document.getElementById(divId).innerHTML = afficheimage;
et
afficheimage = '<img src="'+imageNom+'"style="position: absolute; top: '+posi+"px"+';left:450px;" />';

(bien sur il y a un petit compteur de position en amont pour "posi"..)
et j'ai considéré que toute les photos à afficher seraient de la même taille (px)

et dans body :
j'appelle la fonction par onclick.

ça fonctionne, mais bien sur ...quand la seconde photo (ou 3eme ou 4eme ou 5eme ...) est appelée, elles se positionne bien à l'endroit voulu, mais les autres photos ne sont plus affichées...

j'ai pensé ne pas faire appel à une fonction javascript pour appeler les photos, mais utiliser un attribut spécifique onclick pour appeler la photo directement dans body("onclick = <img src="photo1.jpg' style="position ...>

Mais onclick et <img ne semble pas possible...

merci à l'avance pour votre aide