»
EnglishFrenchVietnamese

Print - Simple Slideshow with striped transition effect - JavaScriptBank.com

Full version: jsB@nk » Image » Slideshow » Simple Slideshow with striped transition effect
URL: https://www.javascriptbank.com/simple-slideshow-with-striped-transition-effect-index.html

Simple Slideshow with striped transition effect © JavaScriptBank.comThis crossbrowser slideshow uses an eycatching transition effect between the images. Each image has a JavaScript link of its own. Add as many images as you like. Easy copy-and-paste configuration.

Full version: jsB@nk » Image » Slideshow » Simple Slideshow with striped transition effect
URL: https://www.javascriptbank.com/simple-slideshow-with-striped-transition-effect-index.html



JavaScript
<SCRIPT LANGUAGE="JavaScript"><!-- Beginning of JavaScript -// Simple Slideshow with striped transition effect by Urs Dudli and Peter Gehrig // Copyright (c) 2000 Peter Gehrig and Urs Dudli // 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"// 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// speed of the transition effect. Less means fastervar pause=50// standstill-time of the images (seconds)var standstill=2var 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=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-->


Files
http://javascriptbank.com/javascript/image/Simple_Slideshow_with_striped_transition_effect/Simple_Slideshow_with_striped_transition_effect_images.zip