Ya encontré el script que realiza el efecto. El código seria el siguiente:
index.html Código HTML:
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>web</title>
<script language="JavaScript" src="SlideShow.js" type="text/javascript"></script>
<script type="text/javascript">
var slideShow1 = new SlideShow('slideshow_div', 'slideshow_image');
slideShow1.setImages(
'foto1.jpg',
'foto2.jpg',
'foto3.jpg',
);
slideShow1.setTransitionDuration(1500);
slideShow1.setSlideDuration(3500);
slideShow1.setRandom(true);
slideShow1.start();
//-->
</script>
</head>
<body onload="javascript:initAll();">
<div id="slideshow_div" style="background: url('foto1.jpg'); float: left; background-repeat: no-repeat; width: 455px; height: 341px;"><img id="slideshow_image" src="foto1.jpg" style="width: 455px; height: 341px; border: none; float: left; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" alt="" /></div>
</body>
</html> SlideShow.js
Código:
// slideShow ///////////////////////////////////////////////////////////////
// by www.markuslerner.com
// 2008-01-24
function SlideShow(slideshowDivID, slideshowImageID, slideshowLinkID) {
this.slideshowDivID = slideshowDivID;
this.slideshowImageID = slideshowImageID;
this.slideshowLinkID = slideshowLinkID;
this.preloadFlag = false;
this.currentImageID = 0;
this.nextImageID = 1;
this.slideDuration = 2000;
this.transitionDuration = 1000;
this.random = false;
}
SlideShow.prototype.setRandom = function(random) {
this.random = random;
}
SlideShow.prototype.setSlideDuration = function(slideDuration) {
this.slideDuration = slideDuration;
}
SlideShow.prototype.setTransitionDuration = function(transitionDuration) {
this.transitionDuration = transitionDuration;
}
SlideShow.prototype.setImages = function() {
if (document.images) {
this.images = new Array();
for (var i = 0; i < this.setImages.arguments.length; i++) {
this.images[i] = this.createImage(this.setImages.arguments[i]);
}
this.preloadFlag = true;
}
}
SlideShow.prototype.setLinks = function() {
this.links = new Array();
for (var i = 0; i < this.setLinks.arguments.length; i++) {
this.links[i] = this.setLinks.arguments[i];
}
}
SlideShow.prototype.createImage = function(url) {
if (document.images) {
var img = new Image();
img.src = url;
return img;
}
}
SlideShow.prototype.sineInOut = function(pos) {
// EASE IN AND OUT by position
// pos = 0 ... 1
// returns float(0 ... 1)
return (1 - Math.cos(pos * Math.PI)) / 2;
}
SlideShow.prototype.loop = function() {
var currentTime = new Date().getTime();
this.position = (currentTime - this.startTime) / this.transitionDuration;
if(this.position > 0.99) {
this.position = 0.99;
clearInterval(this.interval);
}
var opacity = this.sineInOut(this.position);
this.setOpacity(this.objectStyle, opacity);
}
SlideShow.prototype.setOpacity = function(objectStyle, opacity) {
// set the opacity for different browsers
objectStyle.opacity = (opacity);
objectStyle.MozOpacity = (opacity);
objectStyle.KhtmlOpacity = (opacity);
objectStyle.filter = "alpha(opacity=" + opacity * 100 + ")";
}
SlideShow.prototype.startTransition = function(currentImage, nextImage) {
// set the current image as background
document.getElementById(this.slideshowDivID).style.backgroundImage = "url(" + currentImage + ")";
this.objectStyle = document.getElementById(this.slideshowImageID).style;
this.setOpacity(this.objectStyle, 0);
this.nextImage = nextImage;
var self = this;
window.setTimeout(function(){ self.startInterval(); }, 10);
}
SlideShow.prototype.setLink = function(url) {
if(this.slideshowLinkID != '') {
document.getElementById(this.slideshowLinkID).href = url;
}
}
SlideShow.prototype.startInterval = function() {
// set the new image as the foreground image
document.getElementById(this.slideshowImageID).src = this.nextImage;
this.startTime = new Date().getTime();
var self = this;
this.interval = setInterval(function(){ self.loop(); }, 10);
}
SlideShow.prototype.showNextImage = function() {
if(document.images && this.preloadFlag) {
if(this.random) {
this.nextImageID = Math.round(Math.random() * (this.images.length - 1));
} else {
this.nextImageID = this.currentImageID + 1;
}
if(this.nextImageID > this.images.length - 1) {
this.nextImageID = 0;
}
if(this.links != null) {
this.setLink(this.links[this.nextImageID]);
}
this.startTransition(this.images[this.currentImageID].src, this.images[this.nextImageID].src);
this.currentImageID = this.nextImageID;
}
var self = this;
window.setTimeout(function(){ self.showNextImage(); }, this.slideDuration);
}
SlideShow.prototype.start = function() {
var self = this;
window.setTimeout(function(){ self.showNextImage(); }, this.slideDuration);
}
Es facil de integrar pero me gustaria que cuando cambiara la imagen tambien cambiara un texto explicativo de la imagen. ¿Como podria adaptar esto en el script?
Saludos.