Slideshow med drop-in

Med dette script får du et slideshow, hvor dine billeder skifter ved at "droppe" ned foran det forrige.

Scriptet er egentlig tænkt som en billedskifter (slideshow), men denne version er også velegnet til bannerrotation, da der kan indsættes links i billederne.

Scriptet kan opsættes med så mange billeder/bannere, 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=100            // Definer fade hastigheed

var dropimages=new Array()
// Indsæt dine billeder her. Tilføj flere efter behov
dropimages[0]="billede1.gif"
dropimages[1]="billede2.jpg"
dropimages[2]="billede3.gif"

var droplinks=new Array()
// Indsæt den url som dine links skal henvise til. Tilføj et for hvert billede overfor
droplinks[0]="../../../tools/tools.htm"
droplinks[1]="../../../scripts/scripts.htm"
droplinks[2]="../../../scripts/scripts.htm"


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

var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[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:-'+slideshow_height+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+ slideshow_height+';top:-'+slideshow_height+'"></div></div>')
//http://www.a-begynder.dk
else
document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')

var curpos=slideshow_height*(-1)
var degree=5
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1


function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.top=curpos
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
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()",fade)'
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(){
window.location=droplinks[linkindex]
}

function resetit(what){
//http://www.a-begynder.dk
curpos=slideshow_height*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos}

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>
<!-- SCRIPT - Slideshow - SLUT -->
 

Definer selv værdierne angivet med rødt.

Du kan tilføje og slette billeder efter behov. Så skal du bare huske tilsvarende at tilføje en linie med linkurl ... evt. en såkaldt "tom" link.

Eksempel >>
 

Hint:

Hvis der er et eller flere billeder, som du ikke ønsker at indsætte link i, kan du lave et såkaldt "tomt" link ved at skrive "#" i url'en.

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.

God fornøjelse ...

Til toppen >>