Floating Transparent Slideshow

Mit diesem Script macht es besonders viel Spass, Bilder in einer Slideshow darzustellen, denn die einzelnen Grafiken stehen immer auf der gleichen Stelle der Seite.

Beim herunterscrollen folgenden Sie in einer sanften Auf- oder Abwärtsbewegung. Außerdem werden die Grafiken langsam eingeblendet, welches eine Flashanimation vermuten lässt.

Demo, siehe links

Dieses Script läuft auf folgenden Browsern:
	Internet Explorer
	Mozilla Firefox
getestet jeweils mit der aktuellen Version

HTML-Einbindung
   <BODY onLoad="runSlideShow()">     <div id="FloatSlideShow" style="position:absolute;z-index:1000000"> <a href="http://www.java24.net" target=_blank> <img border=0 src="float1_trans.gif" name='SlideShow' width=200 height=200></a> </div>  <script> /* Floating Slide Show Script C.2004 by CodeLifter.com */ // You *must* add onload="runSlideShow()" to the <body> tag // of the page. // In the section marked Edit the HTML, above, remember to // set the path and size for the first image. // ======================================= // Set the following variables // ======================================= // Set slideShowSpeed (milliseconds): var slideShowSpeed = 3000 // Duration of crossfade (seconds) for IE: var crossFadeDuration = 3 // Set the positioning variables, below: // Negative numbers are relative to right (whereX) or bottom (whereY) // Positive numbers are relative to left (whereX) or (whereY) top // Experiment with values to get positioning exact, and allow // for the dimensions of the image in the positioning var whereX = 140; var whereY = -233; // Specify the image files: var Pic = new Array() // don't touch this! // to add more images, just continue // the pattern, adding to the array below Pic[0] = 'float1_trans.gif' Pic[1] = 'float2_trans.gif' Pic[2] = 'float3_trans.gif' Pic[3] = 'float4_trans.gif' Pic[4] = 'float5_trans.gif' // ======================================= // Do not edit *anything* below this line! // ======================================= var nn=(navigator.appName.indexOf("Netscape")!=-1); var t;var j=0;var p=Pic.length;var preLoad=new Array(); for (i=0;i<p;i++){preLoad[i]=new Image();preLoad[i].src = Pic[i];} function runSlideShow(){ if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply();} if (document.all || document.getElementById){document.images.SlideShow.src = preLoad[j].src;}else{ document.FloatSlideShow.document.images["SlideShow"].src = preLoad[j].src;} if (document.all){document.images.SlideShow.filters.blendTrans.Play();} j=j+1;if (j>(p-1))j=0;t=setTimeout('runSlideShow()', slideShowSpeed);} var dD=document,dH=dD.html,dB=dD.body,px=dD.layers?'':'px'; function floatSS(iX,iY,id){ var L=dD.getElementById?dD.getElementById(id):dD.all?dD.all[id]:dD.layers[id]; this[id+'O']=L;if(dD.layers)L.style=L;L.nX=L.iX=iX;L.nY=L.iY=iY; L.P=function(x,y){this.style.left=x+px;this.style.top=y+px;};L.Fss=function(){var pX, pY; pX=(this.iX >=0)?0:nn?innerWidth:nn&&dH.clientWidth?dH.clientWidth:dB.clientWidth; pY=nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop; if(this.iY<0)pY+=nn?innerHeight:nn&&dH.clientHeight?dH.clientHeight:dB.clientHeight; this.nX+=.1*(pX+this.iX-this.nX);this.nY+=.1*(pY+this.iY-this.nY);this.P(this.nX,this.nY); setTimeout(this.id+'O.Fss()',33);};return L;} floatSS(whereX,whereY,'FloatSlideShow').Fss(); </script>

Hier kannst Du Dir das Javascript einfach per eMail zusenden lassen.

Mail:

Name:

Abo
Wenn Du den Newsletter beziehen möchtest, klicke bitte in das Feld "Abo"