Tengo muy pocos conocimientos de Javascript y he encontrado un código muy bueno para un Slide Show que muestra las imágenes que le paso a través de un arreglo.
El único problema lo tengo al principio del Slide. Es irregular la aparición de la primera foto y ya luego, todo marcha bien.
Esto es lo que quiero resolver.
He hecho varias cosas, entre las que está poner como imagen de background del <body> la imagen primera que sale pero sigue la irregularidad.Pueden ver lo que sucede en: http://www.jinanproducciones.com/fot...ner/banner.php
Yo tomé este código de aquí: http://www.cryer.co.uk/resources/jav...2slideshow.htm, y las únicas modificaciones que hice fué el modo como le pasé las fotos que es, a través de un arreglo.
Muchísimas gracias y a continuación el código:
Código:
<body>
<div id="EmilyPictureBackground">
<img src="50.jpg" name="EmilyPicture" width="275" height="365" id="EmilyPicture"></div>
<script type="text/javascript">
// Browser Slide-Show script. With image cross fade effect for those browsers
// that support it.
// Script copyright (C) 2004-2008 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
var FadeDurationMS=2000;
function SetOpacity(object,opacityPct)
{
// IE.
object.style.filter = 'alpha(opacity=' + opacityPct + ')';
// Old mozilla and firefox
object.style.MozOpacity = opacityPct/100;
// Everything else.
object.style.opacity = opacityPct/100;
}
function ChangeOpacity(id,msDuration,msStart,fromO,toO)
{
var element=document.getElementById(id);
var msNow = (new Date()).getTime();
var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
if (opacity>=100)
{
SetOpacity(element,100);
element.timer = undefined;
}
else if (opacity<=0)
{
SetOpacity(element,0);
element.timer = undefined;
}
else
{
SetOpacity(element,opacity);
element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",10);
}
}
function FadeInImage(foregroundID,newImage,backgroundID)
{
var foreground=document.getElementById(foregroundID);
if (foreground.timer) window.clearTimeout(foreground.timer);
if (backgroundID)
{
var background=document.getElementById(backgroundID);
if (background)
{
if (background.src)
{
foreground.src = background.src;
SetOpacity(foreground,100);
}
background.src = newImage;
background.style.backgroundImage = 'url(' + newImage + ')';
background.style.backgroundRepeat = 'no-repeat';
var startMS = (new Date()).getTime();
foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + FadeDurationMS + "," + startMS + ",100,0)",10);
}
} else {
foreground.src = newImage;
}
}
var slideCache = new Array();
function RunSlideShow(pictureID,backgroundID,imageFiles,displaySecs)
{
var imageSeparator = imageFiles.indexOf(";");
var nextImage = imageFiles.substring(0,imageSeparator);
FadeInImage(pictureID,nextImage,backgroundID);
var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.length)
+ ';' + nextImage;
setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+futureImages+"',"+displaySecs+")",
displaySecs*1000);
// Cache the next image to improve performance.
imageSeparator = futureImages.indexOf(";");
nextImage = futureImages.substring(0,imageSeparator);
if (slideCache[nextImage] == null)
{
slideCache[nextImage] = new Image;
slideCache[nextImage].src = nextImage;
}
}
</script>
<?php
//creamos el arreglo
$input = array();
$cont=1;
while ($cont<55) {
$input[$cont]=$cont;
++$cont;
}
//desordenamos el arreglo y creamos la cadema de elementos
shuffle($input);//desordena
$fotos='';
$cont=1;
while ($cont<55) {
$fotos.=$input[$cont].".jpg";
if ($cont<54) {
$fotos.=";";
}
++$cont;
}
?>
<script type="text/javascript">
RunSlideShow("EmilyPicture","EmilyPictureBackground","<?php echo $fotos;?>",5);
</script>
</body>
