Slider: JavaScript slideshow with transparency effect animation

Slideshow with transparency effect animation
JavaScript slideshow with special transparency effect between the pictures. You may add as many pictures as you like. You may add a message and a link to each image. Easy 1-minute-configuration. 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 name (URLs) of the slideshow pictures
var image = new Array()
image[0]="imgslider123.gif"
image[1]="imgslider223.jpg"
image[2]="imgslider323.jpg"

// add a message for each picture
var mes = new Array()
mes[0]="My private island? You like it?"
mes[1]="My holiday car. You envy me?"
mes[2]="Speed-up my life, please!"

// 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 height of your images (pixels)
var imagewidth=240

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

// the style of your messages
var font_family="Arial"
var font_color="red"
var font_size="8pt"
var background_color="white"

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

// 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 coverimagewidth=1800
var coverimageheight=60
var coverimage="imgslidercover3.png"
var imagetop=0
var imageleft=0

var imgpreload=new Array()
for (i=0;i<=image.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=image[i]
}
for (i=0;i<=image.length-1;i++) {
	image[i]="<img 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('strtcover').style.top=imagetop
     document.getElementById('strtcover').style.left=imageleft
	 document.getElementById('text').style.top=imagetop
     document.getElementById('text').style.left=imageleft
	 document.getElementById('message').style.top=imagetop
     document.getElementById('message').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)	
		document.getElementById('strtcover').style.visibility="HIDDEN"
        i_image++
		if (firsttime) {i_image--;firsttime=false}
        if (i_image>=image.length) {i_image=0}
        text.innerHTML=image[i_image] 
		message.innerHTML=mes[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('font-family:'+font_family+';')
document.write('font-size:'+font_size+';')
document.write('color:'+font_color+';')
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('<span ID="message" class="imagestyle" style="background-color:'+background_color+'"></span>')
document.write('<span ID="strtcover" class="imagestyle" style="background-color:#000000;width:'+imagewidth+'px;height:'+imageheight+';"></span>')
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 "imgslidercover3.png". Do not change its name! Put it in the same folder as your webpage.