Slideshow med billedfader

Med dette script får du et slideshow, hvor dine billeder fader fra det ene til det andet.

Scriptet kan opsættes med så mange billeder, du ønsker.

Sådan gør du:

Indsæt dette script i din html-kode der hvor du vil have slideshowet:

<!-- SCRIPT - Slideshow -->

<script language="JavaScript1.2">

//Script hentet fra @-beynder
 //http://www.a-begynder.dk
 //Stedet for webmasters ... vi har næsten alt til hjemmesider
 //----------------------------------------------------------
 
var slideshow_width=90  // Definer billedbredde
var slideshow_height=90 // Definer billedhøjde
var pause=3000          // Definer tid i tusindedele sekund
var fade=50             // Definer fade hastighed

var fadeimages=new Array()
// Indsæt dine billeder her. Tilføj flere efter behov
fadeimages[0]="../images/knapper/tools.gif"
fadeimages[1]="../images/knapper/scripts.gif"
fadeimages[2]="../images/knapper/frontpage.gif"


///// Du skal IKKE ændre noget efter denne linie /////
//////////////////////////////////////////////////////

var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf ("Opera")==-1

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+';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+ slideshow_height+';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')
//http://www.a-begynder.dk
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1


function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/100
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.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("fadepic()",fade)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
//http://www.a-begynder.dk
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>

<!-- SCRIPT - Slideshow - SLUT -->

Definer selv værdierne angivet med rødt.

Du kan tilføje og slette billeder efter behov.

Eksempel >>

Bemærk:

De billeder, du anvender, bør alle være samme størrelse, da du i starten definerer størrelsen på slideshowet. Hvis du har billeder som er større end dette, bliver disse skåret af.

Så er det bare at komme i gang ...
Endnu et script fra @-begynder

Til toppen >>