Code:
<!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:450px;top:50px;width:400px;height:85px;border:solid red 1px;
}
#tst IMG {
width:100px;height:75px;float:left;margin-Left:5px;
}
.frame {
position:relative;left:0px;top:0px;width:100px;height:75px;background-Color:#FFCC66;border:solid red 1px;float:left;margin-Left:5px;
}
/*]]>*/
</style>
</head>
<body>
<input type="button" name="" value="Fwd" onmouseup="S.Step(1);" />
<input type="button" name="" value="Back" onmouseup="S.Step(-1);" />
<div id="tst" >
<div >
<div class="frame" >0</div>
<div class="frame" >1</div>
<div class="frame" >2</div>
<div class="frame" >3</div>
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Step Carousel
// by Vic Phillips
function StepCarousel(o){
var oop=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','left','height','offsetTop','offsetHeight']:['left','top','width','offsetLeft','offsetWidth'],obj=document.getElementById(o.ID),ary=o.ImageArray,ms=o.StepDuration,hold=o.AutoHold,days=o.DaysPersistence,sf=o.StartFrame,srt=o.AutoStart,pms=o.PreloadDuration,ud=o.Direction,pag=o.Paginate,add=o.AddEvents,slide=obj.getElementsByTagName('DIV')[0];
oop.mde=mde;
oop.obj=obj;
oop.slide=slide;
oop.ms=typeof(ms)=='number'?ms:1000;
oop.hold=typeof(hold)=='number'?hold:oop.ms*2;
oop.srt=typeof(srt)=='number'?srt:false;
oop.pms=typeof(pms)=='number'?pms:5000;
oop.nme=o.ID+'=';
oop.days=typeof(days)=='number'&&oop.cookie?days:false;
oop.ctr=o.Center;
oop.cnt=typeof(sf)=='number'?sf:0;
oop.ud=typeof(ud)=='string'&&ud.charAt(0).toUpperCase()=='C'?-1:1;
oop.auto=false;
oop.pag=typeof(pag)=='object'&&oop.page?pag:false;
oop.preload(o.CommonClass);
}
StepCarousel.prototype={
GoTo:function(nu,cng){
var oop=this;
oop.Pause();
if (oop.ary[nu]&&nu!=oop.cnt){
oop.ud=cng===true?nu>oop.cnt?1:-1:oop.ud;
oop.Step(0,nu);
}
},
Auto:function(ms,hold){
var oop=this;
oop.hold=typeof(hold)=='number'?hold:oop.hold;
oop.Pause();
oop.to=setTimeout(function(){ oop.Step(oop.ud,null,true); },ms||200);
},
Pause:function(ms){
this.auto=false;
clearTimeout(this.to);
},
Step:function(ud,cnt,auto){
var oop=this,ary=oop.ary,ud=typeof(ud)=='number'?ud>0?1:-1:oop.ud,cnt=typeof(cnt)=='number'?cnt:oop.cnt+ud;
if (typeof(ary[cnt])!='number'){
cnt=ud>0?0:ary.length-1;
oop.now+=oop.sz*(ud>0?1:-1);
}
oop.cnt=cnt;
oop.auto=auto===true;
clearTimeout(oop.dly);
this.animate(oop.mde[0],oop.now,ary[cnt],new Date(),oop.ms);
},
animate:function(mde,f,t,srt,mS){
var oop=this,cnt=oop.cnt,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
oop.now=Math.max(now,f<0||t<0?now:0);
oop.slide.style[mde]=oop.now+'px';
}
if (ms<mS){
oop.dly=setTimeout(function(){ oop.animate(mde,f,t,srt,mS); },10);
}
else {
oop.now=t;
oop.slide.style[mde]=t+'px';
if (oop.auto){
oop.Auto(oop.hold);
}
}
},
preload:function(cls){
var oop=this,s=oop.slide,clds=s.childNodes,img,ary=[],clone,z0=0;
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
img=[clds[z0],clds[z0].nodeName.toUpperCase()=='IMG'?clds[z0]:clds[z0].getElementsByTagName('IMG')[0],new Image()];
if (img[1]){
img[2].src=img[1].src;
}
ary.push(img);
}
}
oop.clds=[];
oop.preloadck(ary,new Date(),oop.pms);
},
preloadck:function(ary,date,ms){
var oop=this,z0=0,z1=0;
for (;z0<ary.length;z0++){
if (ary[z0][2].src&&ary[z0][2].width<40&&new Date()-date<ms){
return setTimeout(function(){ oop.preloadck(ary,date,ms); },100);
}
}
for (;z1<ary.length;z1++){
if (ary[z1][2].src&&ary[z1][2].width<40){
ary[z1][0].parentNode.removeChild(ary[z1][0]);
}
else {
oop.clds.push(ary[z1][0].nodeName.toUpperCase()=='A'?ary[z1][0].getElementsByTagName('IMG')[0]:ary[z1][0]);
}
}
oop.init();
},
init:function(){
var oop=this,mde=oop.mde,obj=oop.obj,slide=oop.slide,clds=oop.clds,sz,ary=[],clone,nu=oop.days&&oop.cookie(oop.nme)?oop.cookie(oop.nme)*1:oop.cnt,z0=0;
obj.style.overflow='hidden';
slide.style.position='absolute';
slide.style[mde[2]]='3000px';
for (;z0<clds.length;z0++){
ary.push(-clds[z0][mde[3]]+(oop.ctr!==false?(obj[mde[4]]-clds[z0][mde[4]])/2:0));
sz=clds[z0][mde[3]]+clds[z0][mde[4]];
}
slide.style[mde[2]]=sz+5+'px';
clone=slide.cloneNode(true);
clone.style[mde[1]]='0px';
clone.style[mde[0]]=-sz+'px';
slide.appendChild(clone);
clone=clone.cloneNode(true);
clone.style[mde[0]]=sz+'px';
slide.appendChild(clone);
oop.ary=ary;
oop.sz=sz;
oop.cnt=ary[nu]?nu:0;
oop.now=ary[oop.cnt];
slide.style[mde[0]]=oop.now+'px';
if (oop.srt){
oop.Auto(oop.srt);
}
}
}
var S=new StepCarousel({
ID:'tst',
StepDuration:500,
Center:false,
PreloadDuration:5000
});
/*]]>*/
</script>
</body>
</html>
Horizontal Image/Text Link viewer
Reply With Quote
Bookmarks