Full version: jsB@nk » Image » Slideshow » Slideshow with circle transition effect
URL: https://www.javascriptbank.com/slideshow-with-circle-transition-effect-index.html
Enhance your slideshow with a charming transition effect between the images. You may set each image to a different link. True copy-and-paste installation with step-by step instructions.
Full version: jsB@nk » Image » Slideshow » Slideshow with circle transition effect
URL: https://www.javascriptbank.com/slideshow-with-circle-transition-effect-index.html
<SCRIPT LANGUAGE="JavaScript"><!-- Beginning of JavaScript -// Slideshow with circle transition effect by Urs Dudli and Peter Gehrig // Copyright (c) 2000 Peter Gehrig and Urs Dudli // the file-names of your slideshow's images. Add as may as you like.var imgsname=new Array()imgsname[0]="../logojs.gif"imgsname[1]="../logojs.gif"imgsname[2]="../logojs.gif"// the links for each image. You MUST add a link for each imagevar imgslink=new Array()imgslink[0]="http://javascriptbank.com"imgslink[1]="http://javascriptbank.com"imgslink[2]="http://javascriptbank.com"// vertical position of the slideshow (distance to the top margin of the webpage, pixels)var imgstop=10// horizontal position of the slideshow (distance to the left margin of the webpage, pixels)var imgsleft=10// Configure the speed of the transition effect. Less means fastervar pause=50// Configure the standstill-time of the images (seconds)var standstill=3var 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]="circle01.gif"coverimage[1]="circle02.gif"coverimage[2]="circle03.gif"coverimage[3]="circle04.gif"coverimage[4]="circle05.gif"coverimage[5]="circle1.gif"coverimage[6]="circle2.gif"coverimage[7]="circle3.gif"coverimage[8]="circle4.gif"coverimage[9]="circle5.gif"coverimage[10]="circle6.gif"coverimage[11]="circle7.gif"coverimage[12]="circle8.gif"coverimage[13]="circle11.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=0var i_loop=0var thisurl=0var timervar coverwidthvar coverheightstandstill=standstill*1000function 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=imgsleftimgs.innerHTML="<img name='imgsback' src='"+imgsname[i_loop]+"' border=0>"coverwidth=imgs.offsetWidthcoverheight=imgs.offsetHeightcover.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=imgsleftdocument.imgs.document.write("<img name='imgsback' src='"+imgsname[i_loop]+"' border=0>")document.imgs.document.close()coverwidth=document.imgs.document.widthcoverheight=document.imgs.document.heightdocument.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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><DIV ID="imgs" style="position:absolute"> </DIV><DIV ID="cover" style="position:absolute"> </DIV><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->