Podés simplificarlo de esta manera con Ajax y php
obtenes la hora con php
hora.php
Código PHP:
Ver original<?php
echo "<img src='$hora.jpg' alt='' width='100' height='100' />";
?>
con este formato $hora representará un numero de 0 a 23
en tu index.php
Código PHP:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>hora dinámica php+ajax</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
// agrega un parametro unico al archivo
var prevenirCache=1;
/*** no editar ***/
var cargarObjetos="";
var rootdomain="http://"+window.location.hostname;
var cacheParam="";
function cargarAjax(url,divAjax){
var contenidoAjax = false;
if(window.XMLHttpRequest) {
contenidoAjax = new XMLHttpRequest();
}else if(window.ActiveXObject) {
contenidoAjax = new ActiveXObject("Microsoft.XMLHTTP");
}else{
alert('Su navegador no soporta Ajax');
}
contenidoAjax.onreadystatechange=function(){
cargaPagina(contenidoAjax,divAjax);
}
if(prevenirCache == 1){
cacheParam=(url.indexOf("?")!=-1)? "&"+ new Date().getTime() : "?"+ new Date().getTime();
}
contenidoAjax.open('GET', url+cacheParam, true);
contenidoAjax.send(null);
}
function cargaPagina(contenidoAjax,divAjax){
if(contenidoAjax.readyState==1){
// el mensaje actualizando es opcional
document.getElementById(divAjax).innerHTML = '<p style="text-align: center;">actualizando<\/p>';
}
if(contenidoAjax.readyState == 4 && (contenidoAjax.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(divAjax).innerHTML=contenidoAjax.responseText;
}
}
// llamas a la función cada 59 segundos para que actualice la imagen
window.onload = setInterval("cargarAjax('hora.php','la_hora')", 59000);
//]]>
</script>
</head>
<body>
<div id="la_hora">
<?php
// mostrás la imagen por defecto al cargar la página
echo "<img src='$hora.jpg' alt='' width='100' height='100' />";
?>
</div>
</body>
</html>
Ahora solo te resta nombrar tus imágenes
0.jpg
1.jpg
2.jpg
y así sucesivamente
Y siempre tendrás la imágen correcta
Saludos