Lo script che presentiamo è un interessante slideshow adatto a presentare immagini di ogni tipo. Lo scorrimento avverrà da sinistra verso destra e sarà possibile associare un link ad ogni foto.
Il codice è compatibile con Explorer 5.x e Netscape 6.x mentre con Navigator 4.x non verrà riprodotto l'effetto "slide".
- esempio.htm
- cartella IMG
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Lo script va inserito all'interno del corpo della pagina, nel punto esatto in cui vorremo far comparire lo slideshow:
<script language="JavaScript1.2">
var slideshow_width='250px'
var slideshow_height='190px'
var pause=3000
var slidebgcolor="#ffffff"
var dropimages=new Array()
dropimages[0]="img/img1.jpg"
dropimages[1]="img/img2.jpg"
dropimages[2]="img/img3.jpg"
var droplinks=new Array()
droplinks[0]="http://www.html.it"
droplinks[1]="http://flash-mx.it"
droplinks[2]="http://freephp.html.it"
var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}
var ie4=document.all
var dom=document.getElementById
if (ie4||dom)
document.write('<div
style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0"
style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-
'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';b
ackground-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
else
document.write('<a href="javascript:rotatelink()"><img
name="defaultslide" src="'+dropimages[0]+'" border="0"/></a>')
var curpos=parseInt(slideshow_width)*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=linkindex=0
var nextimageindex=1
function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) :
document.getElementById(nextcanvas)
var slideimage='<img src="'+dropimages[curimageindex]+'" border="0"/>'
tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a
href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage
nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}
function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) :
document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
linkindex=curimageindex
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}
function rotatelink(){
if (droplinks[linkindex]!="")
window.location=droplinks[linkindex]
}
function resetit(what){
curpos=parseInt(slideshow_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}
function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) :
document.getElementById(curcanvas)
crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img
src="'+dropimages[curimageindex]+'" border="0"/></a>'
rotateimage()
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
</script>
Vediamo come personalizzare il codice:
var slideshow_width='250px'
indica la lunghezza dell'area dello slideshow. solitamente va impostata con la misura dell'immagine più grande
var slideshow_height='190px'
è l'altezza dell'area dello slideshow. anche in questo caso va impostata con la misura dell'immagine più grande
var pause=3000
indica la pausa (in millisecondi) tra un'immagine e l'altra
var slidebgcolor="#ffffff"
è il colore di sfondo dell'area dello slideshow. la variabile può anche essere lasciata vuota (inserendo solamente due doppi apici: "")
var dropimages=new Array()
dropimages[0]="img/img1.jpg"
dropimages[1]="img/img2.jpg"
dropimages[2]="img/img3.jpg"
è l'array contenente l'eventuale percorso e le immagini da utilizzare nello slideshow. sarà possibile inserire quante più immagini vogliamo; basterà seguire l'ordine progressivo tra le parentesi quadre
var droplinks=new Array()
droplinks[0]="http://www.html.it"
droplinks[1]="http://flash-mx.it"
droplinks[2]=""
ad ogni array-immagine deve corrispondere un array-link. se vogliamo associare un collegamento alla rispettiva foto basterà inserire l'url completo altrimenti si dovranno mettere semplicemente due doppi apici senza spazio ("")
Altre modifiche non sono necessarie.
