Slider: Slideshow with transition effect animation

Slider: Slideshow with transition effect animation
JavaScript slideshow with special transition effect effect between the pictures. You may add as many pictures as you like. Each picture can be linked to a separate URL. Easy 1-minute-configuration. This fun transition animation works with IE 5x/6x/7x/8x, FF 2x/3x/4x, Opera 7x/8x/9x/10x, Chrome 3x/4x.

Configuration

Step 1: Open your webpage and paste the following code anywhere between <body> and </body>:

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.fabulant.com on the webpage

// the width of the gif-image gliding over your pictures back and forth
var coverimagewidth=1800

// the height of the gif-image gliding over your pictures back and forth
var coverimageheight=17

// the name (URLs) of the slideshow pictures
var image = new Array()
image[0]="<img src='imgslider123.gif'>"
image[1]="<img src='imgslider223.jpg'>"
image[2]="<img src='imgslider323.jpg'>"

// the links for each picture
var imageurl = new Array()
imageurl[0]="http://www.fabulant.com"
imageurl[1]="http://www.fabulant.com"
imageurl[2]="http://www.fabulant.com"

// the vertical position of your pictures
var imagetop=0

// the horizontal position of your pictures
var imageleft=0

// the height of your images (pixels)
var imagewidth=240

// the width of your images (puxels)
var imageheight=120

// influences the speed of the effect. A high value will speed it up
var step=80

// influences the speed of the effect. A high value will slow it down
var speed=20

// standstill (microseconds)
var pause=1500

// do not edit the values below this line
var coverimage="imgcover1800px.gif"
var imgpreload=new Array()
for (i=0;i<=image.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=image[i]
}
var coverimagetop=imagetop
var coverimageleft=imageleft
var timer
var i_image=0
var i_cover=Math.ceil(imageheight/coverimageheight)
var cliptop=0
var clipleft=0
var clipbottom=imageheight
var clipright=imagewidth
var clippoints
var thisurl
var firsttime=true

function init() {
	 document.getElementById('text').style.top=imagetop
     document.getElementById('text').style.left=imageleft
     document.getElementById('cover').style.top=coverimagetop
     document.getElementById('cover').style.left=coverimageleft
     clipleft=0
     fadeout()
}

function fadeout() {

if (parseInt(document.getElementById('cover').style.left)>=(-coverimagewidth+imagewidth+coverimageleft+step)) {   
        clipleft+=step
        clipright=clipleft+imagewidth
        clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		document.getElementById('cover').style.clip=clippoints
        document.getElementById('cover').style.left=parseInt(document.getElementById('cover').style.left)-step
        timer= setTimeout("fadeout()",speed)
    }
    else {
        clearTimeout(timer)	
        i_image++
		if (firsttime) {i_image--;firsttime=false}
        if (i_image>=image.length) {i_image=0}
        text.innerHTML=image[i_image]  
		thisurl=imageurl[i_image]
        timer= setTimeout("fadein()",pause)
    }
}

function fadein() {
    if (parseInt(document.getElementById('cover').style.left)<=coverimageleft) {   
        clipleft-=step
        clipright=clipleft+imagewidth
        clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		document.getElementById('cover').style.clip=clippoints
        document.getElementById('cover').style.left=parseInt(document.getElementById('cover').style.left)+step
        timer= setTimeout("fadein()",speed)
    }
    else {
        clearTimeout(timer)
		timer= setTimeout("init()",pause)
    }
}

function gotourl() {
	document.location.href=thisurl
}

document.write('<style type="text/css">')
document.write('.imagestyle	{')
document.write('position:absolute;')
document.write('left:-5000px;')
document.write('}')
document.write('</style>')

document.write('<DIV ID="roof" style="position:relative;width:'+imagewidth+'px;height:'+imageheight+';overflow-x:hidden;overflow-y:hidden">')
document.write('<DIV ID="text" class="imagestyle"></DIV>')
document.write('<DIV ID="cover" class="imagestyle">')
document.write('<table cellpadding=0 border=0 cellspacing=0>')
	for (i=1;i<=i_cover;i++) {
		document.write('<tr><td><a href="javascript:gotourl()"><img width="'+coverimagewidth+'" height="'+coverimageheight+'" src="'+coverimage+'" border=0></a></td></tr>')
	}
document.write('</table>')
document.write('</DIV>')
document.write('</DIV>')

window.onload=init
</script>

Step 2: Go to the top of the script and configure number of pictures, picture-size and links of the slideshow.

Step 3: Save the framed image below as "imgcover1800px.gif". Do not change its name! Put it in the same folder as your webpage.