Библиотека Javascript. SE@RCHER

<html> <head> <TITLE>Фото автоматически меняется через прозрачные полосы</TITLE> <meta NAME="keywords" CONTENT="images, DHTML, slideshow, rollover, JavaScript, download, animation, free, applet, dynamic"> <meta NAME="description" CONTENT="This DHTML-crossbrowser transition effect can be added to any slideshows. Very flexible as it works with different image sizes. Each image has a link of its own. Easy configuration."> </HEAD> <BODY bgcolor=FFFFFF> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <SCRIPT > var imgpreload=new Array() for (i=0;i<=imgsname.length-1;i++) { imgpreload[i]=new Image() imgpreload[i].src=imgsname[i] } var coverimage = new Array() coverimage[0]="stripes0.gif" coverimage[1]="stripes1.gif" coverimage[2]="stripes2.gif" coverimage[3]="stripes3.gif" coverimage[4]="stripes4.gif" coverimage[5]="stripes5.gif" coverimage[6]="stripes6.gif" coverimage[7]="stripes7.gif" var covimgpreload=new Array() for (i=0;i<=coverimage.length-1;i++) { covimgpreload[i]=new Image() covimgpreload[i].src=coverimage[i] } var i_imgs=0 var i_loop=0 var thisurl=0 var timer var coverwidth var coverheight standstill=standstill*1000 function init() { if (document.all) { document.all.imgs.style.posTop=imgstop document.all.imgs.style.posLeft=imgsleft document.all.cover.style.posTop=imgstop document.all.cover.style.posLeft=imgsleft imgs.innerHTML="<img name='imgsback' src='"+imgsname[i_loop]+"' border=0 width=250>" coverwidth=imgs.offsetWidth coverheight=imgs.offsetHeight cover.innerHTML="<a href='javascript:gotourl()'><img width="+coverwidth+" height="+coverheight+" name='imgcover' src='"+coverimage[i_loop]+"' border=0 width=250></a>" enlargehearts() } if (document.layers) { document.imgs.top=imgstop document.imgs.left=imgsleft document.cover.top=imgstop document.cover.left=imgsleft document.imgs.document.write("<img name='imgsback' src='"+imgsname[i_loop]+"' border=0 width=250>") document.imgs.document.close() coverwidth=document.imgs.document.width coverheight=document.imgs.document.height document.cover.document.write("<a href='javascript:gotourl()'><img width="+coverwidth+" height="+coverheight+" name='imgcover' src='"+coverimage[i_loop]+"' border=0 width=250></a>") document.cover.document.close() enlargehearts() } } function enlargehearts() { if (i_loop<=coverimage.length-1) { if (document.all) { imgcover.src=coverimage[i_loop] } if (document.layers) { document.cover.document.imgcover.src=coverimage[i_loop] } i_loop++ timer= setTimeout("enlargehearts()",pause) } else { clearTimeout(timer) i_loop-- timer= setTimeout("shrinkhearts()",standstill) } } function shrinkhearts() { if (i_loop>=0) { if (document.all) { imgcover.src=coverimage[i_loop] } if (document.layers) { document.cover.document.imgcover.src=coverimage[i_loop] } i_loop-- timer= setTimeout("shrinkhearts()",pause) } else { clearTimeout(timer) i_loop=0 i_imgs++ if (i_imgs>=imgsname.length) {i_imgs=0} if (document.all) { imgsback.src=imgsname[i_imgs] } if (document.layers) { document.imgs.document.imgsback.src=imgsname[i_imgs] } timer= setTimeout("enlargehearts()",(4*pause)) } } function gotourl() { document.location.href=imgslink[i_imgs] } window.onload=init </SCRIPT> <DIV ID="imgs" style="position:absolute"> </DIV> <DIV ID="cover" style="position:absolute"> </DIV> <DIV ID="instructions" style="position:absolute;top:270px;left:10px;"> <font size=2 color=black face=Verdana><b>Simple Slideshow with striped transition effect</b><br><br> This crossbrwoser slideshow uses an eycatching transition effect between the images. Each image has a link of its own. Add as many images as you like. Easy copy and paste configuration. <br><br><br> <form> <b>Configuration:</b><br><br> <b>Step 1:</b> <a href="imgtransliner.zip">Download this ZIP-File</a>, unzip the transition-images and the script-file 'imgtransliner.js' and put all these files into the same folder your webpage.<br><br> <b>Step 2:</b> Open your webpage and paste the following code between <b><body></b> and <b></body>:</b><br> <input type=button onClick="this.form.code1.focus();this.form.code1.select()" value="select all" style="font-size:8pt"><br> <textarea name="code1" cols="60" rows="6" style="font-size:8pt"> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <SCRIPT > var imgpreload=new Array() for (i=0;i<=imgsname.length-1;i++) { imgpreload[i]=new Image() imgpreload[i].src=imgsname[i] } var coverimage = new Array() coverimage[0]="stripes0.gif" coverimage[1]="stripes1.gif" coverimage[2]="stripes2.gif" coverimage[3]="stripes3.gif" coverimage[4]="stripes4.gif" coverimage[5]="stripes5.gif" coverimage[6]="stripes6.gif" coverimage[7]="stripes7.gif" var covimgpreload=new Array() for (i=0;i<=coverimage.length-1;i++) { covimgpreload[i]=new Image() covimgpreload[i].src=coverimage[i] } var i_imgs=0 var i_loop=0 var thisurl=0 var timer var coverwidth var coverheight standstill=standstill*1000 function init() { if (document.all) { document.all.imgs.style.posTop=imgstop document.all.imgs.style.posLeft=imgsleft document.all.cover.style.posTop=imgstop document.all.cover.style.posLeft=imgsleft imgs.innerHTML="<img name='imgsback' src='"+imgsname[i_loop]+"' border=0>" coverwidth=imgs.offsetWidth coverheight=imgs.offsetHeight cover.innerHTML="<a href='javascript:gotourl()'><img width="+coverwidth+" height="+coverheight+" name='imgcover' src='"+coverimage[i_loop]+"' border=0></a>" enlargehearts() } if (document.layers) { document.imgs.top=imgstop document.imgs.left=imgsleft document.cover.top=imgstop document.cover.left=imgsleft document.imgs.document.write("<img name='imgsback' src='"+imgsname[i_loop]+"' border=0>") document.imgs.document.close() coverwidth=document.imgs.document.width coverheight=document.imgs.document.height document.cover.document.write("<a href='javascript:gotourl()'><img width="+coverwidth+" height="+coverheight+" name='imgcover' src='"+coverimage[i_loop]+"' border=0></a>") document.cover.document.close() enlargehearts() } } function enlargehearts() { if (i_loop<=coverimage.length-1) { if (document.all) { imgcover.src=coverimage[i_loop] } if (document.layers) { document.cover.document.imgcover.src=coverimage[i_loop] } i_loop++ timer= setTimeout("enlargehearts()",pause) } else { clearTimeout(timer) i_loop-- timer= setTimeout("shrinkhearts()",standstill) } } function shrinkhearts() { if (i_loop>=0) { if (document.all) { imgcover.src=coverimage[i_loop] } if (document.layers) { document.cover.document.imgcover.src=coverimage[i_loop] } i_loop-- timer= setTimeout("shrinkhearts()",pause) } else { clearTimeout(timer) i_loop=0 i_imgs++ if (i_imgs>=imgsname.length) {i_imgs=0} if (document.all) { imgsback.src=imgsname[i_imgs] } if (document.layers) { document.imgs.document.imgsback.src=imgsname[i_imgs] } timer= setTimeout("enlargehearts()",(4*pause)) } } function gotourl() { document.location.href=imgslink[i_imgs] } window.onload=init </SCRIPT> <DIV ID="imgs" style="position:absolute"> </DIV> <DIV ID="cover" style="position:absolute"> </DIV>
IMPORTANT: Do not paste this code into tables or <DIV> and </DIV> or between any other container!

Step 3: Go to the top of the script-code inside your webpage and configure the images, the position and the speed of your slideshow.