»
EnglishFrenchVietnamese

Print - Image Slider - JavaScriptBank.com

Full version: jsB@nk » Image » Slideshow » Image Slider
URL: http://www.javascriptbank.com/image-slider.html

Image Slider © JavaScriptBank.comA image sildeshow script.

Full version: jsB@nk » Image » Slideshow » Image Slider
URL: http://www.javascriptbank.com/image-slider.html



JavaScript
<SCRIPT>//detecting browser to dynamically write appropriate DIVs/LAYERsN=(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="+divIdStyl+=" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkColStyl+=";visibility:"+Vis[visb]+";z-index:"+zIndStyl+="'>"}if(N){Styl+=" ID="+divIdStyl+=" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkColStyl+=" visibility="+Vis[visb]+" z-index="+zIndStyl+=">"}document.writeln(Styl)}function EndDiv(){(M||S)? document.writeln("</DIV>"): document.writeln("</LAYER>")}function PutIt(ID,dX,dY){if(N){document.layers[ID].left=dXdocument.layers[ID].top=dY}if(M){document.all[ID].style.left=dXdocument.all[ID].style.top=dY}if(S){document.getElementById(ID).style.left=dXdocument.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=colrxif(N)document.layers[ID].bgColor=colrxif(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=Strif(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-->


HTML
<BODY onload=Slide()><SCRIPT>//allocate images in array PixPix=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*80yof[x]=100GetDiv("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 queuefunction 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]=100if(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:0Zind("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-->