Pase de imagenes con efecto

alamarcheta · #1 (**permalink**) 01/09/2008, 09:58

Hola. He encontrado esta web donde tiene un banner principal donde van pasando imágenes con un efecto alpha pero no se cual es exactamente el script que lo hace trabajar. ¿Me podríais echar un cable?
Saludos

alamarcheta · #2 (**permalink**) 01/09/2008, 11:00

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.

alamarcheta · #3 (**permalink**) 02/09/2008, 04:39

Hola otra vez. ¿Sabríais decirme cual es la variable que le manda la ruta e imagen para poder imprimirla en pantalla?
Echarme una mano please