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[*/
.slider {
position:relative;overflow:hidden;width:400px;height:75px;border:solid red 1px;
}
.slider IMG {
width:100px;margin-Left:5px;
}
.sliderV {
position:relative;overflow:hidden;width:100px;height:300px;border:solid red 1px;
}
.sliderV IMG {
width:100px;margin-Top:5px;
}
/*]]>*/
</style></head>
<body>
<div id="c1" class="slider" onmouseover="zxcConveyor('c1',0);" onmouseout="zxcConveyor('c1',-1);">
<div >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="img" />
</div>
</div>
<div id="c2" class="slider" onmouseover="zxcConveyor('c2',0);" onmouseout="zxcConveyor('c2',1);">
<div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="img" />
</div>
</div>
<div id="c3" class="sliderV" onmouseover="zxcConveyor('c3',0,'V');" onmouseout="zxcConveyor('c3',1,'V');">
<div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="img" />
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
function zxcConveyor(id,spd,mde){
var mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height','left']:['left','offsetLeft','offsetWidth','width','top'],obj=document.getElementById(id),slides=obj.getElementsByTagName('DIV'),lft,sz;
if (!slides[1]){
slides[0].style[mde[3]]='3000px';
slides[0].style.position='absolute';
var objs=slides[0].getElementsByTagName('*'),lgth=objs.length-1,w=objs[lgth][mde[1]]+objs[lgth][mde[2]],c
slides[0].style[mde[0]]='0px';
c=slides[0].cloneNode(true);
c.style[mde[0]]=w+'px';
c.style[mde[4]]='0px';
slides[0].appendChild(c);
zxcConveyor[id]=obj={};
obj.sz=w;
obj.lft=0;
obj.mde=mde[0];
}
obj=zxcConveyor[id];
clearTimeout(obj.to);
sz=obj.sz;
lft=obj.lft;
lft=lft+spd>0&&spd>0?-sz:lft+spd<-sz&&spd<0?0:lft;
slides[0].style[obj.mde]=lft+spd+'px';
obj.lft=lft+spd;
obj.to=setTimeout(function(){ zxcConveyor(id,spd); },50);
}
zxcConveyor('c1',-1);
zxcConveyor('c2',1);
/*]]>*/
</script>
</body>
</html>
Bookmarks