Hola topito2
Primero deberias hacer una precarga de las images. Si tienes las direcciones en un array podrias hacer esto:
Código PHP:
<html>
<head>
<title>Carrusel de imágenes </title>
<?php
$fotos = array("foto1.jpg","foto2.jpg","foto3.jpg");
function preload_image_JS($n,$name_array){
if(gettype($n)=="array"){
$ctr = 0;
$js_array = "var ".$name_array." = new Array(".count($n).");\n";
foreach($n as $value){
$value = addslashes($value);
$js_array .= $name_array."[".$ctr."] = new Image();\n";
$js_array .= $name_array."[".$ctr."].src = \"".$value."\";\n";
$ctr++;
}
return $js_array;
}
}
?>
<script language="JavaScript" type="text/javascript">
<!--
<?
// esta funcion escribe el array de images y precarga
echo preload_image_JS($fotos,"slides");
?>
//-->
</script>
</head>
<body >
<div id="viewer" style="position:absolute; left:10; top:0">
<?
echo "<img src=\"".$fotos[0]."\" width=\"320\" height=\"240\">";
?>
</div>
<div id="controls" style="position:absolute;
left:10px;
top:250px;
width:320px;
text-align: center;
font-weight:bold">
</div>
<script language="JavaScript" type="text/javascript">
<!--
var current_slide = 0
function write_controls() {
if (current_slide == 0) {
previous_control = "Anterior"
}
else {
previous_control = '<a href="javascript:previous_slide()">Anterior</a>'
}
if (current_slide == slides.length - 1) {
next_control = "Siguiente"
}
else {
next_control = '<a href="javascript:next_slide()">Siguiente</a>'
}
if(document.all) document.all.controls.innerHTML = previous_control + " " + next_control;
else document.getElementById("controls").innerHTML = previous_control + " " + next_control;
}
function next_slide() {
current_slide++
if(document.all) document.all.viewer.innerHTML = '<img src="' + slides[current_slide].src + '" width="320" height="240">';
else document.getElementById('viewer').innerHTML ='<img src="' + slides[current_slide].src + '" width="320" height="240">'
write_controls()
}
function previous_slide() {
current_slide--
if(document.all) document.all.viewer.innerHTML = '<img src="' + slides[current_slide].src + '" width="320" height="240">';
else document.getElementById('viewer').innerHTML ='<img src="' + slides[current_slide].src + '" width="320" height="240">';
write_controls()
}
write_controls()
//-->
</script>
</body>
</html>
Espero que te sirva.
Saludos :)