How to Create a Continuous Image Marquee With JavaScript

This JavaScript creates a scrolling marquee in which images area where images move horizontally through the display area. As each image disappears through one side of the display area, it is readded at the beginning of the series of images. This creates a continuous scroll of images in the marquee that loops—as long as you have enough images to fill the width of the marquee display area.

This script does have a few limitations, however:

• The images are displayed at the same size (both width and height). If the images are not physically the same size then they will all be resized. This can result in poor image quality, so it is best to consistently size your source images.
• The height of the images must match the height set for the marquee, otherwise, the images will be resized with the same potential for poor images mentioned above.
• The image width multiplied by the number of images must be greater than the marquee width. The easiest fix for this if there are insufficient images is to just repeat the images in the array to fill the gap.
• The only interaction this script offers is stopping the scroll when the mouse is moved over the marquee and resuming when the mouse moves off the image. We later describe a modification that can be made to convert all the images into links.
• If you have multiple marquees on a page, they all run at the same speed, so mousing-over any of them will cause them all to stop moving.
• You need your own images. Those in the examples are not part of this script.

Image Marquee JavaScript Code

The first, copy the following JavaScript and save it as marquee.js.

This code contains two image arrays (for the two marquees on the example page), as well as two new mq objects containing the information to be displayed in those two marquees.

You may delete one of those objects and change the other to display one continuous marquee on your page or repeat those statements to add even more marquees.

The mqRotate function must be called passing ​mqr after the marquees are defined as that will handle the rotations.

var
mqAry1=['graphics/img0.gif','graphics/img1.gif','graphics/img2.gif','
graphics/img3.gif','graphics/img4.gif','graphics/img5.gif','graphics/
img6.gif','graphics/img7.gif','graphics/img8.gif','graphics/img9.gif',
'graphics/img10.gif','graphics/img11.gif','graphics/img12.gif','
graphics/img13.gif','graphics/img14.gif'];

var
mqAry2=['graphics/img5.gif','graphics/img6.gif','graphics/img7.gif','
graphics/img8.gif','graphics/img9.gif','graphics/img10.gif','graphics/
img11.gif','graphics/img12.gif','graphics/img13.gif','graphics/img14.
gif','graphics/img0.gif','graphics/img1.gif','graphics/img2.gif','
graphics/img3.gif','graphics/img4.gif'];

function start() {
   new mq('m1',mqAry1,60);
   new mq('m2',mqAry2,60);// repeat for as many fuields as required
   mqRotate(mqr); // must come last
}
window.onload = start;

// Continuous Image Marquee
// copyright 24th July 2008 by Stephen Chapman
// http://javascript.about.com
// permission to use this Javascript on your web page is granted
// provided that all of the code below in this script (including these
// comments) is used without any alteration

var
mqr = []; function
mq(id,ary,wid){this.mqo=document.getElementById(id); var heit =
this.mqo.style.height; this.mqo.onmouseout=function()
{mqRotate(mqr);}; this.mqo.onmouseover=function()
{clearTimeout(mqr[0].TO);}; this.mqo.ary=[]; var maxw = ary.length;
for (var
i=0;i<maxw;i++){this.mqo.ary[i]=document.createElement('img');
this.mqo.ary[i].src=ary[i]; this.mqo.ary[i].style.position =
'absolute'; this.mqo.ary[i].style.left = (wid*i)+'px';
this.mqo.ary[i].style.width = wid+'px'; this.mqo.ary[i].style.height =
heit; this.mqo.appendChild(this.mqo.ary[i]);} mqr.push(this.mqo);}
function mqRotate(mqr){if (!mqr) return; for (var j=mqr.length - 1; j
> -1; j--) {maxa = mqr[j].ary.length; for (var i=0;i<maxa;i++){var x =
mqr[j].ary[i].style;  x.left=(parseInt(x.left,10)-1)+'px';} var y =
mqr[j].ary[0].style; if (parseInt(y.left,10)+parseInt(y.width,10)<0)
{var z = mqr[j].ary.shift(); z.style.left = (parseInt(z.style.left) +
parseInt(z.style.width)*maxa) + 'px'; mqr[j].ary.push(z);}}
mqr[0].TO=setTimeout('mqRotate(mqr)',10);}

Read More

How to Create a Continuous Text Marquee in JavaScript

By Stephen Chapman

Next, add the following code into the head section of your page:

<script type="text/javascript" src="marquee.js">
</script>

Add a Style Sheet Command

We need to add a style sheet command to define how each of our marquees will look.

Here's the code we used for the ones on the example page:

.marquee {position:relative;
     overflow:hidden;
     width:500px;
     height:60px;
     border:solid black 1px;
     }

You can change any of these properties for your marquee; however, it must remain position:relative. 

You can either place it in your external style sheet if you have one or enclose it between <style type="text/css"> </style> tags in the head of your page.

Define Where You Will Place the Marquee

The next step is to define a div in your web page where you will place the marquee of images.

The first of the example marquees used this code:

<div id="m1" class="marquee"></div>

The class associates this with the stylesheet code while the id is what we will use in the new mq() call to attach the marquee of images.

Ensure Your Code Contains the Right Values

The final thing to do to put all of this together is make sure that your code to add the mq object in your JavaScript after the page loads contains the right values.

Here's what one of the example statements looks like:

new mq('m1',mqAry1,60);

• The m1 is the id of our div tag that will display the marquee.
• mqAry1 is a reference to an array of images that will be displayed in the marquee.
• The final value 60 is the width of our images (the images will scroll from right to left and so the height is the same as we defined in the style sheet).

To add additional marquees we just set up additional image arrays, additional divs in our HTML, possibly set up additional classes so as to style the marquees differently, and add as many new mq() statements as we have marquees. We just need to make sure that the mqRotate() call follows them to operate the marquees for us.

Making Marquee Images Into Links

There are only two changes you need to make in order to make the images in the marquee into links.

First, change your image array from an array of images to an array of arrays where each of the internal arrays consists of an image in position 0 and the address of the link in position 1.

var mqAry1=[
['graphics/img0.gif','blcmarquee1.htm'],
['graphics/img1.gif','blclockm1.htm'],...
['graphics/img14.gif', 'bltypewriter.htm']];

The second thing to do is to substitute the following for the main part of the script:

// Continuous Image Marquee with Links
// copyright 21st September 2008 by Stephen Chapman
// http://javascript.about.com
// permission to use this Javascript on your web page is granted
// provided that all of the code below in this script (including these
// comments) is used without any alteration
var mqr = []; function mq(id,ary,wid){this.mqo=document.getElementById(id); var heit = this.mqo.style.height; this.mqo.onmouseout=function() {mqRotate(mqr);}; this.mqo.onmouseover=function() {clearTimeout(mqr[0].TO);}; this.mqo.ary=[]; var maxw = ary.length; for (var i=0;i<maxw;i++){var img=document.createElement('img'); img.src=ary[i][0]; var lnk=document.createElement('a'); lnk.href=ary[i][1]; lnk.appendChild(img); this.mqo.ary[i]=document.createElement('div'); this.mqo.ary[i].appendChild(lnk); this.mqo.ary[i].style.position = 'absolute'; this.mqo.ary[i].style.left = (wid*i)+'px'; this.mqo.ary[i].style.width = wid+'px'; this.mqo.ary[i].style.height = heit; this.mqo.appendChild(this.mqo.ary[i]);} mqr.push(this.mqo);} function mqRotate(mqr){if (!mqr) return; for (var j=mqr.length - 1; j > -1; j--) {maxa = mqr[j].ary.length; for (var i=0;i<maxa;i++){var x = mqr[j].ary[i].style;  x.left=(parseInt(x.left,10)-1)+'px';} var y = mqr[j].ary[0].style; if (parseInt(y.left,10)+parseInt(y.width,10)<0) {var z = mqr[j].ary.shift(); z.style.left = (parseInt(z.style.left) + parseInt(z.style.width)*maxa) + 'px'; mqr[j].ary.push(z);}} mqr[0].TO=setTimeout('mqRotate(mqr)',10);}

The rest of the what you need to do remains the same as described for the version of the marquee without the links.