Hello everyone. i have a marquee tag as shown below

<marquee>
<img src="1.jpg">
<img src="1.jpg">
<img src="1.jpg">
<img src="1.jpg">
</marquee>

after scrolling 4 images it shows a big gap. Can we scroll continue without the gap?

2 answers

Mottie 1134
2
points

I put together a simple script to scroll the images to the left (check out the demo). There are a few things to note:

  • The script only scrolls the images inside the div, text will be covered up by the scrolling images
  • You need to set the div's height with CSS, the width will automatically be set by the script to include all the images.
  • Adjust the scroll increment, delay and padding by adding the options inside the script (see the example below)

CSS

<style type="text/css">
 #marquee { height: 440px; }
</style>

HTML

<div id="marquee">
 <img src="image1.jpg">
 <img src="image2.jpg">
 <img src="image3.jpg">
 <img src="image4.jpg">
</div>

Script

<script src="marqueeLeft.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#marquee').marqueeLeft();
})
</script>

or set options as follows (these are the default values):

$('#marquee').marqueeLeft({ increment: 1, padding: 3, delay: 50 });

Download the script by right-clicking on this link and choose Save Link As

Answered almost 7 years ago by Mottie
o.k.w 2355
0
points

It's the default behavior of marquee element, that is to scroll the entire content until it disappears before looping.

There are various ways to control the behavior (see the MDC reference) though I will not recommend since it is not part of W3C HTML/XHTML specifications.

You might want to consider javascript alternatives, e.g. jQuery iScroller

Answered almost 7 years ago by o.k.w