« »

A image sildeshow script.

Label: Image Slider

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<SCRIPT>
//detecting browser to dynamically write appropriate DIVs/LAYERs
N=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)<5)
S=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)>4.9)
M=(navigator.appName.indexOf('Microsoft')!=-1)



Vis=new Array()
Vis[0]=(M||S) ? "hidden" : "hide"
Vis[1]=(M||S) ? "visible" : "show"

function GetDiv(divId,divY,divX,divW,divH,bCol,visb,zInd){
bkCol=(bCol!="")?((N)?" bgColor="+bCol:";background:"+bCol):""

Styl = (M||S) ? "<DIV" : "<LAYER"

if(M||S){
Styl+=" ID="+divId
Styl+=" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkCol
Styl+=";visibility:"+Vis[visb]+";z-index:"+zInd
Styl+="'>"
}

if(N){
Styl+=" ID="+divId
Styl+=" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkCol
Styl+=" visibility="+Vis[visb]+" z-index="+zInd
Styl+=">"
}
document.writeln(Styl)
}

function EndDiv(){
(M||S)? document.writeln("</DIV>"): document.writeln("</LAYER>")
}

function PutIt(ID,dX,dY){
if(N){
document.layers[ID].left=dX
document.layers[ID].top=dY
}
if(M){
document.all[ID].style.left=dX
document.all[ID].style.top=dY
}
if(S){
document.getElementById(ID).style.left=dX
document.getElementById(ID).style.top=dY
}
}

function ShowHide(ID,vs){
if(N){
document.layers[ID].visibility=Vis[vs]
}
if(M){
document.all[ID].style.visibility=Vis[vs]
}
if(S){
document.getElementById(ID).style.visibility=Vis[vs]
}
}

function Xof(ID){
if(N){
return document.layers[ID].left
}
if(M){
return document.all[ID].style.left
}
if(S){
return document.getElementById(ID).style.left
}
}

function Yof(ID){
if(N){
return document.layers[ID].top
}
if(M){
return document.all[ID].style.top
}
if(S){
return document.getElementById(ID).style.top
}
}



function Zind(ID,zz){
if(N){
document.layers[ID].zIndex=zz
}
if(M){
document.all[ID].style.zIndex=zz
}
if(S){
document.getElementById(ID).style.zIndex=zz
}
}

function ChangeCol(ID,colrx){
if(M)document.all[ID].style.background=colrx
if(N)document.layers[ID].bgColor=colrx
if(S)document.getElementById(ID).style.background=colrx
}

function DivWrite(IdName,Str) {
if (N){
document.layers[IdName].document.write(Str)
document.layers[IdName].document.close()
}
if(M) document.all[IdName].innerHTML=Str
if(S) document.getElementById(IdName).innerHTML=Str
}
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<BODY onload=Slide()>
<SCRIPT>
//allocate images in array Pix
Pix=new Array()
Tex=new Array()
Pix[0]=new Image()
Pix[0].src="logojs.gif"
Tex[0]="SCUBA scene"
Pix[1]=new Image()
Pix[1].src="logojs.gif"
Tex[1]="Baldie's mirror!"
Pix[2]=new Image()
Pix[2].src="logojs.gif"
Tex[2]="Run, kid!"
Pix[3]=new Image()
Pix[3].src="logojs.gif"
Tex[3]="Long wait..."
Pix[4]=new Image()
Pix[4].src="logojs.gif"
Tex[4]="SOS!"
Pix[5]=new Image()
Pix[5].src="logojs.gif"
Tex[5]="Grrr..."
Pix[6]=new Image()
Pix[6].src="logojs.gif"
Tex[6]="Space cadet."
Pix[7]=new Image()
Pix[7].src="logojs.gif"
Tex[7]="Old station."

sn=Pix.length

//get divs and put images on each (80px by 80px, and 80px to the left each other, the first at 100,200 coordinate)
xof=new Array()
yof=new Array()
for(x=0;x<sn;x++){
xof[x]=200+x*80
yof[x]=100
GetDiv("Img"+x,100,xof[x],80,80,'#FFFFFF',1,0)
document.write("<img src=",Pix[x].src," width=80 height=80 border=0>")
EndDiv()

GetDiv("Text"+x,320,80,400,80,'#FFFFFF',1,1)
document.write("<h1>",Tex[x],"</h1>")
EndDiv()
}

GetDiv('rightcover1',80,455,400,120,'#FFFFFF',1,4)
document.write("<h1>Slide<br>Show<br>II</h1>")
EndDiv()
GetDiv('rightcover2',80,475,400,120,'#FFFFFF',1,3)
document.write(" ")
EndDiv()

GetDiv('leftcover',320,80,400,120,'#FFFFFF',1,1)
document.write(" ")
EndDiv()

//slide the divs
//when a div left gets lower than 100 it gets placed at 100+sn*80 to rejoin the queue

function Slide(){
for(j=0;j<sn;j++){
xof[j]--
PutIt("Img"+j,xof[j],yof[j])

if(xof[j]<181)yof[j]++
if(yof[j]==200)ShowText(j)
if(xof[j]<101)xof[j]=100
if(yof[j]>340){xof[j]=580;yof[j]=100}
}
setTimeout('Slide()',50)
}

function ShowText(t){
for(dv=0;dv<sn;dv++){
zi=(dv==t)?3:0
Zind("Text"+dv,zi)
}
}
</SCRIPT>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->