in principle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#ss {
position:relative;width:240px;height:300px;border:solid red 1px;text-Align:center;
}
#ss IMG{
position:absolute;left:0px;top:0px;
}
#next {
position:absolute;z-Index:4;left:5px;top:50px;width:40px;height:20px;background-Color:#FFFFCC;
}
#back {
position:absolute;z-Index:4;right:5px;top:50px;width:40px;height:20px;background-Color:#FFFFCC;
}
/*]]>*/
</style></head>
<body>
<div id="ss" >
<div id="next" ></div>
<div id="back" ></div>
<br /><br /><br /><br />
loading
</div>
<input type="button" name="" value="GoTo 0" onclick="zxcSlideShow.GoTo('ss',0);" />
<input type="button" name="" value="GoTo 1" onclick="zxcSlideShow.GoTo('ss',1);" />
<input type="button" name="" value="GoTo 2" onclick="zxcSlideShow.GoTo('ss',2);" />
<script type="text/javascript">
/*<![CDATA[*/
var zxcSlideShow={
GoTo:function(id,n){
var o=this['zxc'+id];
if (o){
this.Pause(o.id);
o.ia[n]&&n!=o.n?this.rotate(o,n):null;
}
},
Next:function(id,ud){
var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
o?this.rotate(o,o.n+ud):null;
},
Auto:function(id,ms){
var o=this['zxc'+id];
o?o.to=setTimeout(function(){ zxcSlideShow.rotate(o,true); },ms||200):null;
},
Pause:function(id){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},
init:function(o){
var id=o.ParentID,ia=o.ImageArray,ms=o.Animate,h=o.AutoStart,add=o.AddEvents,s=o.AutoStart,p=document.getElementById(id);
if (p&&ia instanceof Array){
var a=document.createElement('A'),i=document.createElement('IMG'),z0=0,z1=0;
i.style.position='absolute';
i.style.left=i.style.borderWidth='0px';
i.style.top='-3000px';
for (;z0<ia.length;z0++){
ia[z0][3]=new Image();
}
i.src=ia[0][0];
p.appendChild(a);
a.appendChild(i);
o.id=id;
o.p=p;
o.a=a;
o.i=i;
o.ia=ia;
o.l=z0-1;
o.lk=a;
o.n=0;
o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
o.a=[[p,'width'],[p,'height'],[i,'']];
if (add instanceof Array){
for (;z1<add.length;z1++){
if (add[z1]){
p=document.getElementById(add[z1][0]);
h=add[z1][1];
if (p&&this[add[z1][2]]){
this.addevt(p,h=='mouseover'||h=='mouseout'||h=='mouseup'||h=='mousedown'?h:'click',add[z1][2],id,add[z1][3]);
}
}
}
}
this.rotate(o,0,10);
this['zxc'+id]=o;
typeof(s)=='number'&&s>20?this.Auto(id,s):null;
}
},
rotate:function(o,n,ms){
this.Pause(o.id);
o.i.style.top='-3000px';
o.auto=n===true;
n=o.auto?o.n+1:n;
n=n<0?o.l:n>o.l?0:n;
clearTimeout(o.to);
o.ia[n][3].src=o.ia[n][0];
if (o.ia[n][3].width<40){
return o.to=setTimeout(function(){ zxcSlideShow.rotate(o,n); },100);
}
this.animate(o,o.a[0],o.p.offsetWidth,o.ia[n][3].width,new Date(),ms||o.ms);
this.animate(o,o.a[1],o.p.offsetHeight,o.ia[n][3].height,new Date(),ms||o.ms,n);
o.n=n;
typeof(o.OnChange)=='function'?o.OnChange(n):null;
},
animate:function(o,a,f,t,srt,mS,x){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
n=Math.max(0,n);
a[1]?a[0].style[a[1]]=n+'px':oop.opc(a[0],n);
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,x); },10);
}
else {
a[1]?a[0].style[a[1]]=t+'px':oop.opc(a[0],n);
a[1]?o.i.style[a[1]]=t+'px':null;
if (o.ia[x]){
o.i.src=o.ia[x][3].src;
o.i.style.top='0px';
this.animate(o,o.a[2],0,100,new Date(),mS,true);
}
o.auto&&x===true?oop.Auto(o.id,o.h):null;
}
},
opc:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},
addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}
}
zxcSlideShow.init({
ParentID:'ss',
ImageArray:[
['http://www.glorydaysvintage.co.uk/images/album/summer/summer_01.jpg'],
['http://www.glorydaysvintage.co.uk/images/album/summer/summer_03.jpg'],
['http://www.glorydaysvintage.co.uk/images/album/summer/summer_08.jpg']
],
AddEvents:[
['next','click','Next',1],
['back','click','Next',-1],
['ss','mouseover','Pause'],
['ss','mouseout','Auto'],
],
Animate:1000,
AutoHold:2000,
AutoStart:2000,
OnChange:function(n){
}
});
/*]]>*/
</script>
</body>
</html>