Mausverfolger Cursor-Slideshow

[Hape]

Sie können beliebig viele Bilder hinzufügen. Zu jedem Bild kann ein Kommentar angezeigt werden.

Code: Alles auswählen

<style>
.s {
position:absolute;
left:-5000px;
top:-5000px;
}
</style>

<script>
// CREDITS:
// Cursor Slideshow 2.0
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com

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

// Set the images (URL) for your slideshow. Add as many images as you like
var slideurl=new Array("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg")

// Pause beween the slides (seconds)
var pause=2

//Do not edit below this line
var slidecomment=new Array()
slidecomment[0]=""
slidecomment[1]=""
slidecomment[2]=""
slidecomment[3]=""

var slidefont="Arial"
var slidefontcolor="black"
var slidefontsize="1"


var imgpreload=new Array
for (i=0;i<=slideurl.length;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=slideurl[i]
}
var x=0
var y=0
var horizontal_pos=0
var vertical_pos=0

var x_slices=6

var startpausetime
var nowpausetime
var starttime
var nowtime
var stoptime
var timetohidescroller=false
var textmovedtoleft=0

var slidewidth
var slideheight
var i_loop=0
var i_pic=0
var width_slice
var cliptop=0
var clipbottom
var i_clipright=1
var content=""
var contentful=""
pause=pause*1000

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0

function initiate() {
	getcontent()
    if (ie) {
	    for (i=0;i<=x_slices;i++) {
            var thisinners=eval("s"+i)
            thisinners.innerHTML=content
            var thiss=eval("document.all.s"+i+".style")
            thiss.posLeft=horizontal_pos
            thiss.posTop=vertical_pos
        }
        var thisspan = eval("document.all.s"+0)
		slidewidth=thisspan.offsetWidth
		slideheight=thisspan.offsetHeight
        width_slice=Math.ceil(slidewidth/x_slices)
        clipbottom=slideheight
		document.all.whole.style.posLeft=horizontal_pos
		document.all.whole.style.posTop=vertical_pos
	    i_pic++
	    openlamellar()
    }
	if (ns6) {
	    for (i=0;i<=x_slices;i++) {
            var thisinners=document.getElementById('s'+i)
            thisinners.innerHTML=content
            var thiss=document.getElementById('s'+i).style
            thiss.left=horizontal_pos
            thiss.top=vertical_pos
        }		
		slidewidth=parseInt(document.getElementById('s'+0).offsetWidth)
		slideheight=parseInt(document.getElementById('s'+0).offsetHeight)
        width_slice=Math.ceil(slidewidth/x_slices)
        clipbottom=slideheight
		document.getElementById('whole').style.left=horizontal_pos	
		document.getElementById('whole').style.top=vertical_pos
	    i_pic++
	    openlamellarNS6()
    }
	if (ns4) {
	    for (i=0;i<=x_slices;i++) {
            var thisinners=eval("document.s"+i+".document")
            thisinners.write(content)
			thisinners.close()
            var thiss=eval("document.s"+i)
            thiss.left=horizontal_pos
            thiss.top=vertical_pos
        }
        var thisspan=eval("document.s"+0+".document")
		slidewidth=thisspan.width
		slideheight=thisspan.height
        width_slice=Math.ceil(slidewidth/x_slices)
        clipbottom=slideheight
		document.whole.document.write(" ")
		document.whole.document.close()
		document.whole.left=horizontal_pos
		document.whole.top=vertical_pos
	    i_pic++
	    openlamellarNN()
    }
}

function openlamellar() {
	clipleft=-width_slice
	clipright=0
    if (i_clipright<=width_slice) {
        for (i=0;i<=x_slices;i++) {
            var thiss=eval("document.all.s"+i+".style")
			thiss.posLeft=x
			thiss.posTop=y
			document.all.whole.style.posLeft=x
			document.all.whole.style.posTop=y
            thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
            clipleft+=width_slice
            clipright=clipleft+i_clipright
		}
    i_clipright++
    var timer=setTimeout("openlamellar()",80)
   	}
   	else {
		clearTimeout(timer)
		whole.innerHTML=contentful
		startpause()
		makepause()
	}
}

function openlamellarNS6() {
	clipleft=-width_slice
	clipright=0
    if (i_clipright<=width_slice) {
        for (i=0;i<=x_slices;i++) {
            var thiss=document.getElementById('s'+i).style
			thiss.left=x
			thiss.top=y
			document.getElementById('whole').style.left=x
			document.getElementById('whole').style.top=y
            thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
            clipleft+=width_slice
            clipright=clipleft+i_clipright
		}
    i_clipright++
    var timer=setTimeout("openlamellarNS6()",80)
   	}
   	else {
		clearTimeout(timer)
		document.getElementById('whole').innerHTML=contentful
		startpause()
		makepauseNS6()
	}
}

function makepause() {
	checkpausetime()
    if (nowpausetime<pause) {
        for (i=0;i<=x_slices;i++) {
            var thiss=eval("document.all.s"+i+".style")
			thiss.posLeft=x
			thiss.posTop=y
			document.all.whole.style.posLeft=x
			document.all.whole.style.posTop=y
		}
    var timer=setTimeout("makepause()",80)
   	}
   	else {
		clearTimeout(timer)
		changeslideurl()
	}
}

function makepauseNS6() {
	checkpausetime()
    if (nowpausetime<pause) {
        for (i=0;i<=x_slices;i++) {
            var thiss=document.getElementById('s'+i).style
			thiss.left=x
			thiss.top=y
			document.getElementById('whole').style.left=x
			document.getElementById('whole').style.top=y
		}
    var timer=setTimeout("makepauseNS6()",80)
   	}
   	else {
		clearTimeout(timer)
		changeslideurlNS6()
	}
}

function makepauseNN() {
	checkpausetime()
    if (nowpausetime<pause) {
        for (i=0;i<=x_slices;i++) {
            var thiss=eval("document.s"+i)
			thiss.left=x
			thiss.top=y
			document.whole.left=x
			document.whole.top=y
		}
    var timer=setTimeout("makepauseNN()",80)
   	}
   	else {
		clearTimeout(timer)
		changeslideurlNN()
	}
}

function openlamellarNN() {
	clipleft=-width_slice
	clipright=0
    if (i_clipright<=width_slice) {
        for (i=0;i<=x_slices;i++) {
            var thiss=eval("document.s"+i)
			thiss.left=x
			thiss.top=y
			document.whole.left=x
			document.whole.top=y
			thiss.clip.left=clipleft
        	thiss.clip.right=clipright
        	thiss.clip.top=cliptop
        	thiss.clip.bottom=clipbottom
            clipleft+=width_slice
            clipright=clipleft+i_clipright
		}
    i_clipright++
    var timer=setTimeout("openlamellarNN()",80)
   }
   	else {
		clearTimeout(timer)
		document.whole.document.write(contentful)
		document.whole.document.close()
		startpause()
		makepauseNN()
	}
}


function getcontent() {
    content="<img src='"+slideurl[i_pic]+"' border=0>"
	contentful="<img src='"+slideurl[i_pic]+"' border=0><br><font face="+slidefont+" size="+slidefontsize+" color="+slidefontcolor+">"+slidecomment[i_pic]+"</font>"
}

function changeslideurl() {
	i_clipright=0
	clipleft=0
	clipright=0
	for (i=0;i<=x_slices;i++) {
       	var thiss=eval("document.all.s"+i+".style")
    	thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
	}
	if (i_pic>slideurl.length-1) {i_pic=0}
	whole.innerHTML=content
	getcontent()
	for (i=0;i<=x_slices;i++) {
        var thisinners=eval("s"+i)
        thisinners.innerHTML=content   
    }
	i_pic++
	openlamellar()
}

function changeslideurlNS6() {
	i_clipright=0
	clipleft=0
	clipright=0
	for (i=0;i<=x_slices;i++) {
		var thiss=document.getElementById('s'+i).style
    	thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
	}
	if (i_pic>slideurl.length-1) {i_pic=0}
	document.getElementById('whole').innerHTML=content
	getcontent()

	for (i=0;i<=x_slices;i++) {
        var thisinners=document.getElementById('s'+i)
        thisinners.innerHTML=content   
    }
	i_pic++
	openlamellarNS6()
}

function changeslideurlNN() {
	i_clipright=0
	clipleft=0
	clipright=0
 	for (i=0;i<=x_slices;i++) {
            var thiss=eval("document.s"+i)
			thiss.clip.left=clipleft
        	thiss.clip.right=clipright
        	thiss.clip.top=cliptop
        	thiss.clip.bottom=clipbottom
            clipleft+=width_slice
            clipright=clipleft+i_clipright
	}
	if (i_pic>slideurl.length-1) {i_pic=0}
	document.whole.document.write(content)
	document.whole.document.close()
	getcontent()
	for (i=0;i<=x_slices;i++) {
        var thisinners=eval("document.s"+i+".document")
        thisinners.write(content)
		thisinners.close()
    }
	i_pic++
	openlamellarNN()
}

document.write("<span id='whole' class='s'></span>")
for (i=0;i<=x_slices;i++) {
 	document.write("<span id='s"+i+"' class='s'></span>")
}
document.write("<div id='emptydiv' style='position:relative'>")
document.close()
window.onload=initiate

function startnewtime() {
	starttime= new Date()
	starttime=starttime.getTime()
}

function checktime() {
	    nowtime=new Date()
	    nowtime=nowtime.getTime()
        nowtime=(nowtime-starttime)/1000
		if (nowtime>stoptime) {timetohidescroller=true}
}

function startpause() {
	startpausetime=new Date()
	startpausetime=startpausetime.getTime()
}

function checkpausetime() {
	    nowpausetime=new Date()
	    nowpausetime=nowpausetime.getTime()
        nowpausetime=nowpausetime-startpausetime
}

function hidescroller() {
    if (ie) {
		document.all.bgscroller.style.visibility="hidden"
		document.all.text.style.visibility="hidden"
    }
	if (ns6) {
		document.getElementById('bgscroller').style.visibility="hidden"
		document.getElementById('text').style.visibility="hidden"
    }
	if (ns4) {
		document.bgscroller.visibility="hidden"
		document.text.visibility="hidden"
    }
}

function handlerMM(e){
	x = (ns4 || ns6) ? e.pageX : document.body.scrollLeft+event.clientX
	y = (ns4 || ns6) ? e.pageY : document.body.scrollTop+event.clientY
	x=x+10
	y=y+10

}

if (ns4){
	document.captureEvents(Event.MOUSEMOVE);
}

if (ie || ns4 || ns6) {
	document.onmousemove=handlerMM;
}
</script>

Demoseite hier: Cursor-Slideshow