Ciao, puoi usare semplicemente un elemento <img> come segnaposto sul tuo html, quindi aggiornare via JavaScript solo l'attributo src di tale elemento. Questo mostra la nuova immagine senza bisogno di aggiornare la pagina. Poi con un setInterval o setTimeout puoi eseguire dei controlli ogni tot in modo da aggiornare l'elemento img al cambio di ora.

Posto un esempio pratico da cui puoi prendere spunto:
codice:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script type="text/javascript">
      window.onload = function(){
        var imgLoop = {                                                                                     // aggiorna l'img ogni ora secondo l'elenco specificato
          src: [
              "smile.gif"                                                                                   // ora 0
            , "frown.gif"                                                                                   // ora 1
            , "what.gif"                                                                                    // ...e così via
            , "mad.png"
            , "tongue.png"
            , "blink.gif"
            , "biggrin.gif"
            , "redface.png"
            , "rolleyes.png"
            , "cool.png"
            , "eek.gif"
            , "030.gif"
            , "jam.gif"
            , "dotto.gif"
            , "stordita.gif"
            , "fagiano.gif"
            , "nondirlo.gif"
            , "noncisiamo.gif"
            , "metallica.gif"
            , "sgrat.gif"
            , "senzasperanza.gif"
            , "sbonk.gif"
            , "dho.gif"
            , "cool.gif"
          ]
          , path: "http://forum.html.it/forum/images/smilies/"                                              // percorso della cartella immagini
          , tagImg: imgBox                                                                                  // elemento img
          , delay: {}                                                                                       // oggetto per setTimeout
          , start: function(updateImg){                                                                     // funzione di avvio loop
            var now = new Date()                                                                            // questo istante
            var leftTime = 3600000 - now.getMilliseconds() - now.getSeconds()*1000 - now.getMinutes()*60;   // tempo rimanente fino allo scoccare della prossima ora
            (leftTime >= 2000)? leftTime*=.75 : leftTime+=5;                                                // uso 3/4 del tempo rimanente con un minimo di 2 secondi
            if (updateImg) imgLoop.update(now.getHours());                                                  // se indicato, aggiorno l'immagine
            imgLoop.delay = setTimeout(imgLoop.start,leftTime,leftTime < 2000)                              // timer per il prossimo controllo. Indico di aggiornare l'img se mancano meno di 2 sec
          }
          , update: function(id){                                                                           // funzione di aggiornamento img
            id = id || new Date().getHours();
            imgLoop.tagImg.src = imgLoop.path + imgLoop.src[id];
          }
          , stop: function(){                                                                               // funzione di interruzione loop
            clearTimeout(imgLoop.delay)
          }
        }
        imgLoop.start(true);                                                                                // avvio il loop
      }
    </script>
  </head>
  <body>
    <img id="imgBox" src="noimg" alt="">
  </body>
</html>
Ovviamente ci possono essere svariate soluzioni.