<!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[*/
.crawler {
position:absolute;left:100px;top:100px;width:200px;height:400px;border:solid red 1px;
}
.inner {
position:absolute;left:0px;top:0px;
}
.inner IMG{
width:200px;height:150px;float:left;margin-Top:5px;
}
.inner2 {
position:absolute;left:0px;top:0px;width:2000px;
}
.inner2 IMG {
width:200px;height:150px;float:left;margin-Left:5px;
}
/*]]>*/
</style></head>
<body>
<div id="c1" class="crawler" onmouseover="C1.Speed=0" onmouseout="C1.Speed=-2" >
<div class="inner" >
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/bonsai.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/beach.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/mountain.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/coco.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/water.jpg" />
</div>
</div>
<div id="c2" class="crawler" onmouseover="C2.Speed=0" onmouseout="C2.Speed=-2" style="left:400px;width:400px;height:150px;">
<div class="inner2" >
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/bonsai.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/beach.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/mountain.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/coco.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/water.jpg" />
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
function zxcCrawler(o){
var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height']:['left','offsetLeft','offsetWidth','width'],obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('DIV')[0],psz=obj[mde[2]],clds=slide.getElementsByTagName('*'),lst=clds[clds.length-1],sz=lst[mde[1]]+lst[mde[2]],nu=Math.ceil(psz/sz)+1,slider=document.createElement('DIV'),z0=0,spd=o.Speed,ssz=o.ParentSize;
obj.style.overflow='hidden';
obj.style[mde[3]]=(isFinite(ssz)&&clds[ssz]?clds[ssz][mde[1]]:psz)+'px';
slider.style.position='absolute';
slider.style[mde[0]]='0px';
obj.appendChild(slider);
for (;z0<nu;z0++){
slide=z0>0?slide.cloneNode(true):slide;
slide.style[mde[0]]=sz*z0+'px';
slider.appendChild(slide);
}
this.mde=mde;
this.sz=sz;
this.slider=slider;
this.Speed=isFinite(spd)?spd:-1;
this.spd=this.Speed;
this.to=null;
this.Scroll();
}
zxcCrawler.prototype.Scroll=function(){
var oop=this,spd=this.Speed,spd=isFinite(spd)?spd:this.spd,slider=this.slider,sz=this.sz,mde=this.mde[0],pos=parseInt(slider.style[mde])+spd;
if ((spd<0&&pos<-sz)||(spd>0&&pos>0)){
pos+=sz*(spd<0?1:-1);
}
slider.style[mde]=pos+'px';
this.to=setTimeout(function(){ oop.Scroll(); },20);
}
var C1=new zxcCrawler({
ID:'c1', // the unique ID name of the parent DIV. (string)
Mode:'Vertical', //(optional) the mode of execution, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
Speed:-2, //(optional) the scroll speed, >0 = clockwise, <0 = anticlockwise. (number, default = -1)
ParentSize:3 //(optional) the number of images to display. (number, default = the current size of the parent DIV)
});
var C2=new zxcCrawler({
ID:'c2',
Speed:-2
});
/*]]>*/
</script>
</body>
</html>