Galería de fotos sencilla con HTML, CSS y JavaScript

En este caso vamos a hacer una simple galería de fotos para nuestra página web. Es muy fácil de hacer y muy sencilla de entender. El código está generado por mí al 100% sin haber copiado de ningún lado. Podéis copiar el código si queréis directamente pero es mejor que lo entendáis y lo modifiquéis a vuestro antojo. Se trata de una galería fotográfica con tres fotos. Una siempre se muestra en grande, cada tres segundos pasa a la siguiente foto, pero si hacemos click en una de las fotos pequeñas sale en grande la que hemos elegido.

Veamos el código HTML que debe ir en head:

Veamos el código CSS que debe ir en head:

#galeria{ border: 4px solid #424242; width: 600px; height: 510px; background-color: #D8D8D8;}
#grande{ border: 2px solid #6E6E6E; width: 556px; height: 346px; margin-left: 20px; margin-top: 20px;}
.pequenas{ border: 2px solid #6E6E6E; width: 170px; height: 108px; float: left; margin-top: 10px; margin-left: 19px;}

Veamos el código JavaScript que debe ir en head:

var fotos = ["foto1.jpg","foto2.jpg","foto3.jpg"];
var fotosP = ["fotop1.jpg","fotop2.jpg","fotop3.jpg"];
var fotosURL = ["url(file:///C:/Users/Eneko/Desktop/Cursillo_Javascript/Fotos/foto1.jpg)","url(file:///C:/Users/Eneko/Desktop/Cursillo_Javascript/Fotos/foto2.jpg)","url(file:///C:/Users/Eneko/Desktop/Cursillo_Javascript/Fotos/foto3.jpg)"];

function cargarFotos(){
 document.getElementById('grande').style.backgroundImage = "url(foto1.jpg)";
 for(fo=1;fo<=3;fo++){
  fo = parseInt(fo);
  document.getElementById('pequena'+fo).style.backgroundImage = "url("+fotosP[fo-1]+")";
 }
}
  
function rularFotos(){
 queFoto = document.getElementById('grande').style.backgroundImage;
 //alert(fotosURL[0]);
   
 if(queFoto == fotosURL[0]){
  document.getElementById('grande').style.backgroundImage = fotosURL[1];
 }else{
  if(queFoto == fotosURL[1]){
   document.getElementById('grande').style.backgroundImage = fotosURL[2];
     }else{
   document.getElementById('grande').style.backgroundImage = fotosURL[0];
  }
 }
 setTimeout(rularFotos,3000);
}
  
function cambiarFoto(num){
 document.getElementById('grande').style.backgroundImage = fotosURL[num]; 
}

En el body deberemos poner onLoad="cargarFotos();rularFotos()" para que se ejecuten las funciones.
Veamos el código HTML que debe ir en body:

Los nombres de carpetas, las rutas etc. hay que poner las de vuestro ordenador, evidentement los nombres de las fotos etc. también hay que cambiarlos. Os dejo un enlace del script completo con fotos incluidas.
http://www.eneko-bernaldo.site90.net/scripts/galeria.rar
Un saludo.