I have added more options including a XBrowser scroll speed
<!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">
.marquee1 {
position:relative;height:300px;width:500px;border:solid red 1px;text-Align:left;
}
.marquee1 IMG {
height:300px;
}
.marquee2 {
position:relative;height:200px;text-Align:left;
}
.marquee2 IMG {
}
.marquee3 {
position:relative;width:200px;height:400px;text-Align:left;
}
.marquee3 IMG {
width:200px;height:200px;
}
</style>
<script type="text/javascript">
var mqAry1=['http://www.easydigging.com/images-new/1-garden.jpg','http://www.easydigging.com/images-new/2-tool.jpg','http://www.easydigging.com/images-new/3-hoss.jpg','http://www.easydigging.com/images-new/4-u-bar.jpg','http://www.easydigging.com/images-new/5-seeder.jpg','http://www.easydigging.com/images-new/6-tool.jpg','http://www.easydigging.com/images-new/7-u-bar.jpg','http://www.easydigging.com/images-new/8-tool.jpg','http://www.easydigging.com/images-new/9-hoss.jpg','http://www.easydigging.com/images-new/10-garden.jpg','http://www.easydigging.com/images-new/11-pick.jpg','http://www.easydigging.com/images-new/12-hoss.jpg','http://www.easydigging.com/images-new/13-tool.jpg','http://www.easydigging.com/images-new/14-u-bar.jpg','http://www.easydigging.com/images-new/15-tool.jpg','http://www.easydigging.com/images-new/16-seeder.jpg','http://www.easydigging.com/images-new/17-tool.jpg','http://www.easydigging.com/images-new/18-hoss.jpg','http://www.easydigging.com/images-new/19-tool.jpg','http://www.easydigging.com/images-new/20-u-bar.jpg','http://www.easydigging.com/images-new/21-tool.jpg','http://www.easydigging.com/images-new/22-hoss.jpg','http://www.easydigging.com/images-new/23-u-bar.jpg'];
var mqAry2=[
['http://www.vicsjavascripts.org.uk/StdImages/One.gif','Image 1','http://www.vicsjavascripts.org.uk/StdImages/One.gif','Image 1'],
['http://www.vicsjavascripts.org.uk/StdImages/Two.gif','Image 2'],
['http://www.vicsjavascripts.org.uk/StdImages/Three.gif','Image 3']
];
function zxcMarquee(id,ud,options){
var obj=document.getElementById(id),o=zxcMarquee['zxc'+id],ud=typeof(ud)=='number'?ud>0?1:ud<0?-1:0:0;
if (!o&&typeof(options)=='object'){
var oop=options,b=document.getElementById(oop.StopStartID),ary=oop.ImageArray,ld=oop.LoadDuration,mde=oop.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height']:['left','offsetLeft','offsetWidth','width'],slide=document.createElement('DIV'),img,z0=0;
if (typeof(ary)=='object'&&ary.constructor==Array){
obj.style.overflow='hidden';
slide.style.position='absolute';
slide.style.left='0px';
slide.style.top='0px';
slide.style[mde[3]]='30000px';
slide.style.textAlign='left';
obj.appendChild(slide);
ary=ary.concat();
for (var z0=0;z0<ary.length;z0++){
img=new Image();
img.src=ary[z0][0];
ary[z0][0]=img;
}
oop={
mde:mde,
id:id,
obj:obj,
slide:slide,
ms:oop.SlideDuration,
ld:typeof(ld)=='number'&&ld>1?ld*1000:5000,
now:0,
ud:ud,
b:b,
lstud:ud
}
zxcLoad(oop,ary,new Date());
}
}
if (o){
clearTimeout(o.dly);
o.lstud=ud;
if (ud!=0){
o.ud=ud;
}
if (o.b){
o.b[o.b.nodeName.toUpperCase()=='INPUT'?'value':'innerHTML']=ud==0?'Begin Scroll':'Stop Scroll';
}
if (ud!=0){
zxcScroll(o,o.now,o.sz*ud,new Date(),o.ms*Math.abs((o.now-o.sz*ud)/o.sz)+10,ud);
}
}
}
function zxcScroll(o,f,t,srt,mS,ud){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
o.now=now;
o.slide.style[o.mde]=now+'px';
}
if (ms<mS){
o.dly=setTimeout(function(){ zxcScroll(o,f,t,srt,mS,ud); },10);
}
else {
o.now=0;
o.slide.style[o.mde]=t+'px';
zxcMarquee(o.id,ud);
}
}
function zxcLoad(o,ary,d){
var img=document.createElement('IMG'),sz=0,nu,clone,a,z0=0,z1=0,z2=1;
for (var z0=0;z0<ary.length;z0++){
if (ary[z0][0].width<40&&new Date()-d<o.ld){
o.to=setTimeout(function(){ zxcLoad(o,ary,d); },250);
return;
}
}
for (;z1<ary.length;z1++){
if (ary[z1][0].width>40){
a=document.createElement('A');
o.slide.appendChild(a);
img=document.createElement('IMG');
img.src=ary[z1][0].src;
img.style.borderWidth='0px';
a.appendChild(img);
if (ary[z1][1]){
img.title=ary[z1][1];
}
if (ary[z1][2]){
a.href=ary[z1][2];
}
ary[z1]=img
sz+=img[o.mde[3]];
}
}
if (sz>0){
o.slide.style[o.mde[3]]=sz+5+'px';
clone=o.slide.cloneNode(true);
clone.style.border='solid red 1px';
nu=Math.ceil(o.obj[o.mde[2]]/sz)+1;
for (;z2<nu;z2++){
clone=clone.cloneNode(true);
clone.style[o.mde[0]]=sz*z2+'px';
o.slide.appendChild(clone);
}
o.obj.onmouseover=function(){ zxcMarquee(o.id,0); }
o.obj.onmouseout=function(){ zxcMarquee(o.id,o.ud); }
if (o.b){
o.b.onmouseup=function(){ zxcMarquee(o.id,o.lstud==0?o.ud:0); }
}
o.mde=o.mde[0];
o.sz=sz;
o.ms=typeof(o.ms)=='number'&&o.ms>100?o.ms:sz*10;
zxcMarquee['zxc'+o.id]=o;
zxcMarquee(o.id,o.ud);
}
}
function start(){
// parameter 0 = the unique ID name of the parent DIV. (string)
// parameter 1 = (optional) the direction of the scroll. (number, default = 0, <0 = anti clockwise, >0 = clockwise, 0 = pause)
// parameter 2 = an object defining the script instance options as an object. (object)
// ImageArray:mqAry2, // an array of arrays defining the image srcs, titles and links. (array)
// field 0 = the image src. (string)
// field 1 = (optional) the image title. (string)
// field 2 = (optional) the image link href. (string)
// Mode:'H', //(optional) the mode of execution, 'H' = horizontal, 'V' = vertical. (string, default = 'H' = horizontal)
// SlideDuration:5000, //(optional) the time to scroll the images in milliseconds. (number, default = the width of the images*10)
// LoadDuration:5, //(optional) the time allowed to load the images in seconds. (number, default = 5)
// StopStartID:'b1' //(optional) the unique ID name of the element to control the scroll. (string, default = in line event calls)
zxcMarquee('m1',-1,{ImageArray:mqAry2,Mode:'H',SlideDuration:5000,LoadDuration:5,StopStartID:'b1'});
// for inline event calls call: zxcMarquee('m1',-1);
}
window.onload = start;
</script>
</head>
<body>
<div style=text-align:center; >
<div id="m1" class="marquee1" ></div>
<input id="b1" type="button" name="" value="Stop Scroll" />
<div onmouseup="zxcMarquee('m1',0);" >Stop Scroll</div>
Use any element type for the button
</div>
</body>
</html>