Version complète: jsB@nk » Image » Rotation » Double décoloration Image Scroller 2,03
URL: https://www.javascriptbank.com/double-fading-image-scroller-2-03.html
Image de défilement avec des zones de décoloration. Ajouter un commentaire et un JavaScript lien à chaque image. Configuration facile des images, des attributs font-zones et à la décoloration.
Version complète: jsB@nk » Image » Rotation » Double décoloration Image Scroller 2,03
URL: https://www.javascriptbank.com/double-fading-image-scroller-2-03.html
<SCRIPT>// Image Scroller 2.03 with double-fade effect// URLs of slidesvar slideurl=new Array("logojs.gif","photo1.jpg","photo2.jpg","photo3.jpg")// comments displayed below the slidesvar slidecomment=new Array("JavaScriptBank.com","JavaScriptBank.com","JavaScriptBank.com","JavaScriptBank.com")// links for each slidevar slidelink=new Array("http://JavaScriptBank.com","http://JavaScriptBank.com","http://JavaScriptBank.com","http://JavaScriptBank.com")// targets of the links. Allowed values: "_parent", "_top", "_blank", "_self"var slidetarget=new Array("_blank","_blank","_blank","_blank")// the width of the slideshow (pixels)var scrollerwidth=200// the height of the slideshow (pixels)var scrollerheight=200// width of the transparent zones (pixels)var translayerszone=40// font-attributes for the commentsvar slidefont="Arial"var slidefontcolor="blue"var slidefontsize="2"// background-color of webpage var pagebgcolor="#FFFFFF"// do not edit below this linevar translayerswidth=1var translayersmax=Math.floor(translayerszone/translayerswidth)var translayersleftpos=0var translayersopacity=100var translayersfactor=100/translayersmaxvar translayerswidthall=translayersmax*translayerswidthvar allpicturewidthvar distancepictopic=0var scrollerleft=0var scrollertop=0var pause=20var step=2var newstep=stepvar clipleft,clipright,cliptop,clipbottomvar i_picture=0var timervar picturecontent=""var ns4=document.layers?1:0var ns6=document.getElementById&&!document.all?1:0 var ie=document.all?1:0var browserinfos=navigator.userAgent var opera=browserinfos.match(/Opera/) var preloadedimages=new Array()for (i=0;i<slideurl.length;i++){preloadedimages[i]=new Image()preloadedimages[i].src=slideurl[i]}function init() { if (ie) {allpicturewidth=document.all.picturediv.offsetWidthdocument.all.picturediv.style.posTop=scrollertop document.all.picturediv.style.posLeft=scrollerleft+scrollerwidthclipleft=0clipright=0cliptop=0clipbottom=scrollerheightdocument.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"document.all.picturediv.style.visibility="visible"scrollpicture() }if (ns6) {allpicturewidth=document.getElementById('emptypicturediv').offsetWidthdocument.getElementById('picturediv').style.top=scrollertop document.getElementById('picturediv').style.left=scrollerleft+scrollerwidthclipleft=0clipright=0cliptop=0clipbottom=scrollerheightdocument.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"document.getElementById('picturediv').style.visibility="visible"scrollpicture() }if (ns4) {allpicturewidth=document.roof.document.picturediv.document.widthdocument.roof.document.picturediv.top=scrollertopdocument.roof.document.picturediv.left=scrollerleft+scrollerwidthdocument.roof.document.picturediv.clip.left=0document.roof.document.picturediv.clip.right=0document.roof.document.picturediv.clip.top=0document.roof.document.picturediv.clip.bottom=scrollerheightdocument.roof.document.picturediv.visibility="visible" scrollpicture() }}function scrollpicture() { if (ie) {if (document.all.picturediv.style.posLeft>=scrollerleft-allpicturewidth) {document.all.picturediv.style.posLeft-=stepclipright+=stepif (clipright>scrollerwidth) {clipleft+=step}document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"var timer=setTimeout("scrollpicture()",pause)}else {resetposition()}}if (ns6) {if (parseInt(document.getElementById('picturediv').style.left)>=scrollerleft-allpicturewidth) {document.getElementById('picturediv').style.left=parseInt(document.getElementById('picturediv').style.left)-stepclipright+=stepif (clipright>scrollerwidth) {clipleft+=step}document.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"var timer=setTimeout("scrollpicture()",pause)}else {resetposition()}} if (ns4) {if (document.roof.document.picturediv.left>=scrollerleft-allpicturewidth) {document.roof.document.picturediv.left-=stepdocument.roof.document.picturediv.clip.right+=stepif (document.roof.document.picturediv.clip.right>scrollerwidth) {document.roof.document.picturediv.clip.left+=step}var timer=setTimeout("scrollpicture()",pause)}else {resetposition()}}}function onmsover() {step=0}function onmsout() {step=newstep}function resetposition() {if (ie) { document.all.picturediv.style.posLeft=scrollerleft+scrollerwidthclipleft=0clipright=0document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" scrollpicture()}if (ns6) {allpicturewidth=document.getElementById('emptypicturediv').offsetWidth document.getElementById('picturediv').style.left=scrollerleft+scrollerwidthclipleft=0clipright=0document.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" scrollpicture()}if (ns4) {document.roof.document.picturediv.left=scrollerleft+scrollerwidthdocument.roof.document.picturediv.clip.left=0document.roof.document.picturediv.clip.right=0 scrollpicture()}}picturecontent=""picturecontent+="<table cellpadding=2 cellspacing=0>"picturecontent+="<tr>"for (i=0;i<=slideurl.length-1;i++) {picturecontent+="<td>"picturecontent+="<a href=""+slidelink[i]+"" target=""+slidetarget[i]+"" onMouseOver="javascript:onmsover()" onMouseOut="javascript:onmsout()">"picturecontent+="<img src=""+slideurl[i]+"" border=0></a>"picturecontent+="</td>"}picturecontent+="</tr>"picturecontent+="<tr>"for (i=0;i<=slideurl.length-1;i++) {picturecontent+="<td>"picturecontent+="<font face=""+slidefont+"" color=""+slidefontcolor+"" size="+slidefontsize+">"picturecontent+=slidecomment[i]picturecontent+="</font>"picturecontent+="</td>"}picturecontent+="</tr>"picturecontent+="</tr></table>"if (ie || ns6) {document.write('<div style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;overflow:hidden">')document.write('<div id="picturediv" style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visibility:hidden">'+picturecontent+'</div>')if (ie && !opera) {for (i=0;i<=translayersmax;i++) {document.write('<span ID="trans'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>')translayersleftpos+=translayerswidthtranslayersopacity-=translayersfactor}translayersleftpos=scrollerwidth-translayersleftposfor (ii=0;ii<=translayersmax;ii++) {document.write('<span ID="trans'+ii+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>')translayersleftpos+=translayerswidthtranslayersopacity+=translayersfactor}}if (ns6 && !opera) {for (i=0;i<=translayersmax-1;i++) {document.write('<span ID="transleft'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';-moz-opacity:'+translayersopacity/100+';overflow:hidden"> </span>')translayersleftpos+=translayerswidthtranslayersopacity-=translayersfactorif (translayersopacity<0) {translayersopacity=0.001}}translayersleftpos=scrollerwidth-translayersleftpostranslayersopacity=0.001for (i=0;i<=translayersmax-1;i++) {document.write('<span ID="transright'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';-moz-opacity:'+translayersopacity/100+';"> </span>')translayersleftpos+=translayerswidthtranslayersopacity+=translayersfactor}}document.write('</div>')document.write('<div id="emptypicturediv" style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visibility:hidden">'+picturecontent+'</div>')window.onload=init}if (ns4) {document.write('<ilayer name="roof" width='+scrollerwidth+' height='+scrollerheight+'>')document.write('<layer name="picturediv" width='+scrollerwidth+' height='+scrollerheight+' visibility=hide>'+picturecontent+'</layer>')document.write('</ilayer>')window.onload=init}</SCRIPT>