Full version: jsB@nk » Image » Slideshow » Dia-Show 2.0 with double gum
URL: https://www.javascriptbank.com/dia-show-2-0-with-double-gum.html
Enhanced double-gum-effect made for banner-rotations or diashows. Each image or banner can be linked to a different Website. Netscape-users will see a simple image-rotation-effect. Why? Unfortunately Netscape Navigator is too slow to create a smooth movement.
Full version: jsB@nk » Image » Slideshow » Dia-Show 2.0 with double gum
URL: https://www.javascriptbank.com/dia-show-2-0-with-double-gum.html
<SCRIPT><!-- Beginning of JavaScript -// Dia-Show 2.0: double-gum-effect// CONFIGURATION:// 1.Create your images (gif or jpg). They should have the same width and height. // Put those images in the same directory as the HTML-file. //You can add as many images as you like.// 2.Copy the script-block and paste it into head-section of your HTML-file..// 3. Copy the span-blocks with the id "imgcontainer1" and "imgcontainer2". //Paste them into the body-section of your HTML-file.// 4.Insert 'onLoad="initiate()"' into the body tag.// 5.Configure the varibales below// The width of your images (pixels). All pictures should have the same width.var imgwidth=400// The height of your images (pixels). All pictures should have the same height.var imgheight=90// The horizontal and vertical position of the images (pixels). var pos_left=20var pos_top=20// The name of your images. You may add as many images as you like.var imgname=new Array()imgname[0]="logojs.gif"imgname[1]="logojs.gif"imgname[2]="logojs.gif"imgname[3]="logojs.gif"// Where should those images be linked to? // Add an URL for each image.// If you don't want to add an URL just write '#' instead of // the URL, see sample imgurl[2].var imgurl=new Array()imgurl[0]="http://javascriptbank.com"imgurl[1]="http://javascriptbank.com"imgurl[2]="http://javascriptbank.com"imgurl[3]="http://javascriptbank.com"// This block will preload your images. Do not edit this block.var imgpreload=new Array()for (i=0;i<=imgname.length-1;i++) {imgpreload[i]=new Image()imgpreload[i].src=imgname[i]}// Standstill-time between the images (microseconds).var pause=2000// Speed of the stretching and shrinking effect. More means slower.var speed=20// This variable also affects the speed (the length of the step between each inmage-frame measured in pixels). More means faster.var step=10// Do not edit the script belowvar i_loop=0var i_image1=0var i_image2=1function stretchimage() {if (i_loop<=imgwidth) {if (document.all) {imgcontainer1.innerHTML="<a href='"+imgurl[i_image1]+"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image1]+"' border='0'></a>"document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft+i_loopimgcontainer2.innerHTML="<a href='"+imgurl[i_image2]+"' target='_blank'><img width='"+(imgwidth-i_loop)+"' height='"+imgheight+"' src='"+imgname[i_image2]+"' border='0'></a>"}i_loop=i_loop+stepvar timer=setTimeout("stretchimage()",speed) }else {clearTimeout(timer)changeimage()}}function changeimage() {i_loop=0i_image1++if (i_image1>imgname.length-1) {i_image1=0}i_image2=i_image1-1if (i_image2>imgname.length-1) {i_image2=0}if (i_image2<0) {i_image2=imgname.length-1}document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft var timer=setTimeout("stretchimage()",pause)}function initiate() {if (document.all) {document.all.imgcontainer1.style.posLeft=pos_leftdocument.all.imgcontainer2.style.posLeft=pos_leftdocument.all.imgcontainer1.style.posTop=pos_topdocument.all.imgcontainer2.style.posTop=pos_topchangeimage()}if (document.layers) {document.imgcontainer1.left=pos_leftdocument.imgcontainer2.left=pos_leftdocument.imgcontainer1.top=pos_topdocument.imgcontainer2.top=pos_toprotatenetscape()}}function rotatenetscape() {document.imgcontainer1.document.write("<a href='"+imgurl[i_image1]+"' target='_blank'><img src='"+imgname[i_image1]+"' border='0'></a>")document.imgcontainer1.document.close()i_image1++if (i_image1>imgname.length-1) {i_image1=0} var timer=setTimeout("rotatenetscape()",pause*2)}// - End of JavaScript - --></SCRIPT><BODY onload=initiate()><SPAN id=imgcontainer1 style="POSITION: relative"></SPAN><SPAN id=imgcontainer2 style="POSITION: relative"></SPAN></BODY>