Vai al contenuto

3 Immagini che loppano con dissolvenza

Tacabriga

Da Tacabriga
in Web design e sistemisti

Messaggi raccomandati

Tacabriga

Tacabriga

Inviato
Inviato

Ciao a tutti.. mi sapete dire come posso fare un rettangolo dove vengono visualizzate in continuazione 4 immagini che cambiano con effetto dissolvenza ???

Non vorrei usare il flash perchè non lo so usare... non c'è qualche java script??

--- Imac 24" + Iphone 8Gb --- Che spettacolo !!!! como

Link al commento
Condividi su altri siti
chiccorosso

chiccorosso

Inviato
Inviato

invece si può fare:

http://demos.mootools.net/Asset.images

la libreria è free. fl a sh fa sc h i fo :ghghgh:

ciau

“Per quanto ci sforziamo di migliorarci, saremo sempre pieni pieni di difetti...

pertanto l'unico difetto che non possiamo permetterci è l'intransigenza.â€

chiccorosso@email.it

Link al commento
Condividi su altri siti
Lammy

Lammy

Inviato
Inviato

Invece di utilizzare mootools che a volte è difficile da settare, prova questo script. Sempre gratuito, che fa esclusivamente il fade delle immagini.

In html richiama il file fadeimage.js (il codice + lungo in questa pagina) con questo tag,

<script type="text/javascript" src="fadeimage.js"></script>

che puoi inserire nel tag <head></head>

Nel tag <body> per utilizzare lo script inserisci questo codice nell'elemento che vuoi utilizzare come contenitore per le immagini in fade:

<script type="text/javascript">
	var img=new Array();
	img[0]=["images/nomeimmagine.jpg","",""];
	img[1]=["images/nomeimmagine02.jpg","",""];
	img[2]=["images/nomeimmagine03.jpg","",""];
	img[3]=["images/nomeimmagine04.jpg","",""];
	new fadeshow(img, 275, 250, 0, 3000, 3000, 0);
</script>

le variabili che vedi nella riga new fadeshow(img, 275, 250, 0, 3000, 3000, 0);

sono : theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder

Copia e incolla il codice qui sotto in un file che rinominerai come fadeimage.js.

/***********************************************
* Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var fadebgcolor="white";
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
	theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) 
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
	this.postimages[p]=new Image()
	this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
	document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
	document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
	this.startit()
else{
	this.curimageindex++
	setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
	obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
	if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
	obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
	obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
	obj.tempobj.style.MozOpacity=obj.degree/101
	else if (obj.tempobj.style.KhtmlOpacity)
	obj.tempobj.style.KhtmlOpacity=obj.degree/100
}
else{
	clearInterval(fadeclear[obj.slideshowid])
	obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
	obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
	obj.populateslide(obj.tempobj, obj.nextimageindex)
	obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
	setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
	slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
	slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
	slideHTML+='</a>'
	picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
	var cacheobj=this
if (this.mouseovercheck==1)
	setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
	this.resetit()
	var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
	crossobj.style.zIndex++
	fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
	this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
	var ns4imgobj=document.images['defaultslide'+this.slideshowid]
	ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
	if (typeof crossobj.filters[0].opacity=="number") //if IE6+
		crossobj.filters(0).opacity=this.degree
	else //else if IE5.5-
		crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
	crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
	crossobj.style.KhtmlOpacity=obj.degree/100
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
	var cacheobj=this
	var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
	crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
	crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

E il gioco è fatto :confused:

buon divertimento

The question is not how far. The question is do you possess the constitution, the depth of faith, to go as far as is needed?

Link al commento
Condividi su altri siti

Archiviato

Questa discussione è archiviata e chiusa a future risposte.

Vai alla lista discussioni
×
×
  • Crea Nuovo...