»
EnglishFrenchVietnamese

Print - Slideshow with circle transition effect - JavaScriptBank.com

Full version: jsB@nk » Image » Slideshow » Slideshow with circle transition effect
URL: http://www.javascriptbank.com/slideshow-with-circle-transition-effect-index.html

Slideshow with circle transition effect © JavaScriptBank.comEnhance 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: http://www.javascriptbank.com/slideshow-with-circle-transition-effect-index.html



JavaScript
<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-->


HTML
<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-->