<!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[*/
#tst {
position:relative;left:300px;top:250px;width:120px;height:400px;border:solid red 1px;
}
#tst1 IMG {
position:relative;left:0px;width:100px;height:75px;margin-Top:5px;
}
.img {
position:relative;left:10px;width:100px;height:75px;margin-Top:5px;
}
.active {
left:5px;width:110px;height:80px;
}
/*]]>*/
</style>
<script src="http://www.vicsjavascripts.org.uk/Animate/Animate.js" type="text/javascript"></script>
</head>
<body>
<input type="button" name="" value="Step Up" onmouseup="S.Next(1);"/>
<input type="button" name="" value="Step Down" onmouseup="S.Next(-1);"/>
<input type="button" name="" value="GoTo 0" onmouseup="S.GoTo(0);"/>
<input type="button" name="" value="GoTo 1" onmouseup="S.GoTo(1);"/>
<input type="button" name="" value="GoTo 2" onmouseup="S.GoTo(2);"/>
<input type="button" name="" value="GoTo 3" onmouseup="S.GoTo(3);"/>
<input type="button" name="" value="GoTo 4" onmouseup="S.GoTo(4);"/>
<input type="button" name="" value="GoTo 5" onmouseup="S.GoTo(5);"/>
<input type="button" name="" value="GoTo 6" onmouseup="S.GoTo(6);"/>
<input type="button" name="" value="GoTo 7" onmouseup="S.GoTo(7);"/>
<div id="tst" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" class="img" alt="Image" title="Image 0" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" class="img" alt="Image" title="Image 1" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" class="img" alt="Image" title="Image 2" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" class="img" alt="Image" title="Image 3" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" class="img" alt="Image" title="Image 4" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" class="img" alt="Image" title="Image 5" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" class="img" alt="Image" title="Image 6" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt13.jpg" class="img" alt="Image" title="Image 7" />
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Step Corousel (14-March-2011)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
// Utalises my animation script featured at http://www.vicsjavascripts.org.uk/Animate/Animate.htm
// ****** Functional Code(3.62K with auto rotation and mouseover, 2.91K without) - No Need to Change
function zxcStepCorousel(o){
var oop=this,obj=document.getElementById(o.ID),clds=obj.getElementsByTagName('IMG'),cldary=[],ary=[],step=o.Step,z0=0,slide=document.createElement('DIV'),z2=0,lst,ssz,slider=document.createElement('DIV'),ms=o.StepDuration,hold=o.AutoHold,lgth,nu,z3=0,z3a,cls,a cls=o.MouseoverClass,srt,mb;
slide.style.position='absolute';
obj.appendChild(slide);
for (;z0<clds.length;z0++){
cldary.push(clds[z0]);
}
this.lgth=0;
lgth=cldary.length-1
for (;z2<=lgth;z2++){
slide.appendChild(cldary[z2]);
if (z2%step==0){
this.lgth++;
}
}
mb=cldary[0].offsetTop+cldary[0].offsetHeight;
step=Math.min(step,lgth);
lst=cldary[cldary.length-1];
ssz=lst.offsetTop+lst.offsetHeight;
slide.style.height=ssz+50+'px';
srt=-ssz-cldary[0].offsetTop;
nu=Math.max(Math.ceil(obj.offsetHeight/ssz),5);
for (;z3<nu;z3++){
slide=z3>0?slide.cloneNode(true):slide;
slide.style.top=ssz*z3+'px';
slider.appendChild(slide);
clds=slide.childNodes;
if (typeof(acls)=='string'){
for (z3a=0;z3a<clds.length;z3a++){
cls=clds[z3a].className;
if (cls){
this.addevt(clds[z3a],'mouseover','mouse',[clds[z3a],cls+' '+acls]);
this.addevt(clds[z3a],'mouseout','mouse',[clds[z3a],cls]);
}
}
}
}
obj.appendChild(slider);
slider.style.position='absolute';
slider.style.top=srt+'px';
this.oop=new zxcAnimate('top',slider,srt);
this.oop.Complete=function(){
oop.run=true;
}
this.ssz=ssz;
this.srt=srt;
this.mb=mb;
this.stp=step;
this.imglgth=cldary.length-1;
this.scale=[0,mb*step]
this.cnt=0;
this.imgcnt=0;
this.run=true;
ms=typeof(ms)=='number'?ms:1000;
this.ms=ms;
this.obj=obj;
this.to=null;
obj.style.overflow='hidden';
if (typeof(o.AutoRotate)=='object'&&this.autoinit){
this.autoinit(o.AutoRotate);
}
}
zxcStepCorousel.prototype={
Next:function(ud){
if (this.run){
clearTimeout(this.to);
var cnt=this.cnt+(typeof(ud)=='number'&&ud<0?-1:1),lgth=this.lgth,oop=this.oop,mb=this.mb;
cnt=cnt<0?lgth:cnt>lgth?0:cnt;
if (this.cnt==0){
oop.data[0]=this.srt*(mb>0?1:3)-mb*this.imgcnt;
}
this.step(mb*this.stp*ud);
this.cnt=cnt;
lgth=this.imglgth,cnt=this.imgcnt;
for (var z0=0;z0<this.stp;z0++){
cnt+=ud;
cnt=cnt<0?lgth:cnt>lgth?0:cnt;
}
this.imgcnt=cnt;
}
},
GoTo:function(nu){
if (this.run&&nu<=this.imglgth){
clearTimeout(this.to);
var mb=this.mb,mb1;
mb1=nu*mb-this.imgcnt*mb;
mb2=this.ssz+(this.imgcnt*mb-nu*mb);
this.imgcnt=nu;
this.step(mb2>mb1?mb1:-mb2,true);
}
},
step:function(mb,goto){
this.run=false;
var oop=this.oop,data=oop.data[0];
oop.animate(data,data-mb,this.ms,this.scale);
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
},
// Optional Auto Rotate Code
autoinit:function(o){
var hold=o.Hold,srt=o.AutoStart,evts=o.Events;
if (typeof(hold)=='number'){
this.hold=hold+this.ms;
if (typeof(evts)!='boolean'||evts){
this.addevt(this.obj,'mouseover','Pause');
this.addevt(this.obj,'mouseout','Auto');
}
if (typeof(srt)!='boolean'||srt){
this.Auto(this.hold);
}
}
},
Auto:function(ms){
if (this.run){
this.Pause();
var oop=this;
this.to=setTimeout(function(){ oop.auto(); },ms||500);
}
},
Pause:function(){
clearTimeout(this.to);
},
auto:function(nu){
this.Next(1);
var oop=this;
this.to=setTimeout(function(){ oop.auto(); },this.hold);
},
// Optional Mouse Code
mouse:function(cls){
cls[0].className=cls[1];
}
}
S=new zxcStepCorousel({
ID:'tst', // the unique ID name of the parent node. (srting)
Step:3, // the of images to step. (number)
StepDuration:500, //(optional) duration of each steps in milli seconds. (number)
AutoRotate:{
Hold:2000, // the auto rotaton 'hold' between steps in milli seconds.(number)
AutoStart:true, //(optional) true = start auto rotation on initialization. (boolean, defaut = true)
Events:true //(optional) true = add events the the parent node to stop and start auto rotation. (boolean, defaut = true)
},
MouseoverClass:'active' //(optional) the CSS class to be applied to an image on mouse over. (string)
});
/*]]>*/
</script>
</body>
</html>