Foros del Web » Programación web » Javascript »

Pase de imagenes con efecto

Estas en el tema de Pase de imagenes con efecto en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/09/2008, 09:58
Avatar de alamarcheta  
Fecha de Ingreso: mayo-2005
Ubicación: Isla Mêlée
Mensajes: 499
Antigüedad: 9 años, 4 meses
Puntos: 1
Pase de imagenes con efecto

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
  #2 (permalink)  
Antiguo 01/09/2008, 11:00
Avatar de alamarcheta  
Fecha de Ingreso: mayo-2005
Ubicación: Isla Mêlée
Mensajes: 499
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: Pase de imagenes con efecto

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.
  #3 (permalink)  
Antiguo 02/09/2008, 04:39
Avatar de alamarcheta  
Fecha de Ingreso: mayo-2005
Ubicación: Isla Mêlée
Mensajes: 499
Antigüedad: 9 años, 4 meses
Puntos: 1
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:14.
SEO by vBSEO 3.3.2