<html>
<head>
<style>
#slideview{
position:relative;
margin-left: 200px;
width: 900px;
height: 200px;
overflow: hidden;
border: 3px solid #000000;
padding: 0px;
}
#slidestroke{
position: absolute;
left: 0px;
width: 9000px;
text-align: left;
padding: 0px;
height: 100%;
margin-left: -300px;
}
</style>
<script language="JavaScript">
var blok = new Array;
blok[0]=['<img id="img0" src="foto1.jpg"',' width="300" height="200"',' style="background-color:yellow;"',' onClick="showImage(\'showimage\',0)"','>'];
blok[1]=['<img id="img1" src="foto2.jpg"',' width="300" height="200"',' style="background-color:blue;"',' onClick="showImage(\'showimage\',1)"','>'];
blok[2]=['<img id="img2" src="foto3.jpg"',' width="300" height="200"',' style="background-color:green;"',' onClick="showImage(\'showimage\',2)"','>'];
blok[3]=['<img id="img3" src="foto4.jpg"',' width="300" height="200"',' style="background-color:red;"',' onClick="showImage(\'showimage\',3)"','>'];
blok[4]=['<img id="img4" src="foto5.jpg"',' width="300" height="200"',' style="background-color:purple;"',' onClick="showImage(\'showimage\',4)"','>'];
var slide_a = 3; //total of visible thumbnails
var slide_x = 0; //start position in pixels
var slide_n = 1; //counter (used in "while"-loop)
var slide_w = 300; //width of thumbnail
var slide_i = 'slidestroke'; //id of element (in this case the div "slidestroke"
var Items = blok.length; //total of thumbnails in array
var breedte = slide_a*slide_w; //width of slidestroke
var speed = 0; //initial slidespeed
var left = breedte/3; //from 0 to [left] --> area which triggers left slide show
var right = breedte-left; //from right to [breedte] --> area which triggers right slide show
function handler(e){
//Get coördinates of mousepointer.
e = e || window.event;
var mousex = e.layerX || e.x || e.offsetX;
var mousey = e.layerY || e.y || e.offsetY;
return mousex;
}
function slidespeed(){
//The more the mousepointer is to the left or to the right, the faster the slideshow will scroll.
//The div "slidestroke" is devided into 7 parts: left_sp-3, left_sp-2, left_sp-1, sp-0, right_sp-1, right_sp-2, right_sp3
mousex=handler();
speed=0 //speed is 0 (= no scroll), 1, 2 or 3
if (mousex<=left/3){
speed=-3;
}
else if(mousex>left/3 && mousex<=left/2){
speed=-2;
}
else if(mousex>left/2 && mousex<=left){
speed=-1;
}
if (mousex>=breedte-(left/3)){
speed=3;
}
else if(mousex<breedte-(left/3) && mousex>=breedte-(left/2)){
speed=2;
}
else if(mousex<breedte-(left/2) && mousex>=right){
speed=1;
}
return speed;
}
function slide(n){
if(n==1){
//only used for page load, trigger is: body onload="slide(1)"
swap_right(slide_n);
n--;
}
else{
slide_x+=speed;
if(speed>0){
if(slide_x>=slide_w && slide_x<=slide_w+3){ //slide_x is 300 - 303
slide_x-=slide_w;
swap_right(slide_n);
}
}
else if(speed<0){
if(slide_x<=-slide_w || slide_x<=0){
slide_x+=slide_w;
swap_left(slide_n);
}
}
document.getElementById(slide_i).style.left=slide_x+"px";
}
window.setTimeout(slide,10);
}
function swap_right(n){
while(n>0){
blok.splice(0,0,blok[Items-1]);
blok.splice(Items,1);
document.getElementById(slide_i).innerHTML = blok.join('');
n--;
}
}
function swap_left(n){
while(n>0){
blok.splice(Items,0,blok[0]);
blok.splice(0,1);
document.getElementById(slide_i).innerHTML = blok.join('');
n--;
}
}
function showImage(location,number){
alert(blok[number][0]+' width="450" height="338"'+blok[number][2]+blok[number][4]);
document.getElementById(location).innerHTML = blok[number][0]+' width="450" height="338"'+blok[number][2]+blok[number][4];
}
</script>
</head>
<body >
<div id="slideview">
<div id="slidestroke" onMouseMove="speed=slidespeed()" onMouseout="speed=0">
</div>
</div>
<center>
<div id="showimage" style="width:450px;height:338px;"></div>
</center>
<script language="JavaScript">
window.onload=slide(1);
</script>
</body>
</html>
