6

I currently want to make a marquee of several images, but my code only allows one. Do you know any way I could add several images to this code? (I have already tried adding the images directly into the div element within the body - it doesn't work.)

   <style type="text/css">
   <!--
    #container {
    background-image: url(images/avycopy.jpg), url(images/5mwmcp.jpg);
    height:428px;
    width:284px;
    background-repeat:repeat-x;
    background-size:284px 428px;
    background-position: top left, top right;
    }
    -->
    </style>

    <script type="text/javascript">
    <!--

    var p=0;
    var speed=20;   // vary this to suit, larger value - slower speed

    window.onload=function() {
    gallery();
    }
    function gallery() {

    document.getElementById('container').style.backgroundPosition=p+'px 0';

    p--;    //change this to p-- for right to left direction

    setTimeout('gallery()',speed);
    }
    //-->
    </script>
MochaMoroll
  • 61
  • 1
  • 1
  • 2
  • There are [a few already made](http://stackoverflow.com/questions/337330/javascript-marquee-to-replace-marquee-tags), but they're a bit heavier than what you have. I'll see if I can come up with a simple way to do it (I have an idea!) – Brigand Dec 07 '11 at 15:23
  • I'd prefer not to use any plug ins. And I want to keep to my original code if possible. I want to use this for a school project so don't want to be told off for copying other people. All I want to know is how to add more images. I tried the "url(blah blah)" someone suggested but it doesn't work for me. Only one image ends up scrolling. – MochaMoroll Dec 07 '11 at 15:39
  • Turned out my idea won't work, sorry. (It was to line up `````` elements and move the margin-left of them.) – Brigand Dec 07 '11 at 16:07
  • :'( I've been working on this for over 4 hours. I feel so stupid. I've been searching online for similar examples but they just don't work D: – MochaMoroll Dec 07 '11 at 17:01
  • 1
    @MochaMoroll When searching for example online you may have more luck searching for "conveyor belt" rather than "marquee" – benni_mac_b Dec 07 '11 at 20:01
  • http://jquery.malsup.com/cycle/ – Stuart Dec 07 '11 at 20:10
  • Sorry, I don't want to use plug ins. Plus it doesn't suit my requirements. – MochaMoroll Dec 07 '11 at 20:46

2 Answers2

6

I've put such a slider together for you. No frameworks necessary, although there are some cross-browsers concerns I haven't dealt with (including IE before version 8 dealing with scrollWidth differently).

First, arrange the code like so:

<div id="marquee-container"
 ><span><img src="http://www.dragonfly-site.com/graphics/20-free-dragonfly-clip-art-l.jpg" /></span
 ><span><img src="http://0.tqn.com/d/macs/1/0/2/M/-/-/clipprojectchristmas_400x400.png" /></span
></div>

Add some CSS like this:

#marquee-container {
 width: 500px; /* or whatever you want */
 margin: 0 auto; /* centers it */
 overflow: hidden;
 white-space: nowrap;
}

Now all that should remain is javascript to keep it moving. This will jump back to the beginning once it scrolls all the way; it should look continuous because it duplicates all the images at the end:

(function(window, document, undefined) {
 var spaceinterval = 1;
 var timeinterval = 10; // `speed`
 var max;
 var firstrun = true;
 // Interval function:
 var gallery = function() {
  var elem = document.getElementById("marquee-container");
  if (elem) {
   if (firstrun) {
    max = elem.scrollWidth;
    // Clone the children of the container until the
    // scrollWidth is at least twice as large as max.
    while (elem.scrollWidth < max * 2) {
     var length = elem.children.length;
     for (var i = 0; i < length; ++i) {
      elem.appendChild(elem.children[i].cloneNode(true));
     }
     break;
    }
    firstrun = false;
   }
   if (elem.scrollLeft >= max) {
    elem.scrollLeft -= max;
   } else {
    elem.scrollLeft += spaceinterval;
   }
  }
 };
 window.setInterval(gallery, timeinterval);
})(window, document);

In a jsfiddle

meustrus
  • 6,637
  • 5
  • 42
  • 53
  • This will marquee the images one time and then stop once `scrollLeft === offsetWidth`. If you keep track of the images and move the first one to the end of queue once it is out of the container's viewport, it can marquee forever. – Ross Allen Sep 06 '12 at 18:39
  • Actually, it doesn't stop. It starts over from the beginning. And note that, if the width of the container is `5px`, and the number of `5px`-wide images is `4`, `max = 15px`, or `(4 * image_width) - container_width`. – meustrus Sep 06 '12 at 18:55
  • Thank you. Without that, I'd probably have to do it myself from scratch. I don't use jQuery. I confirm that it works well and it does scroll indefinitely. It is a little unsmooth in Firefox, but that's something I've noticed with all marquee scripts, it might just be something with my Firefox installation... – Rolf Dec 18 '13 at 13:18
  • Actually, yes, it does stop in some situations, but it works well when there are many images. I'm still trying to figure out why. – Rolf Dec 18 '13 at 18:12
  • Inddeed, the problem is that the script assumes that `max` is the width of content (images), but if the number of images are small (images don't fill the container), and the container has a fixed width, then `max` will be the width of the container, which is greater than the width of content, and that causes glitches and problems. – Rolf Dec 18 '13 at 18:29
  • This script assumes that images fill the container. – Rolf Dec 18 '13 at 18:56
  • I fixed it by replacing `if(elem) {` with `if (elem && elem.clientWidth < elem.scrollWidth) {` so that the image marquee is only built when it makes sense - that is when images overflow the container! That solved the problem. – Rolf Dec 18 '13 at 20:07
  • Nicely done! I like how you wrapped it in a IEFE and how it is vanilla JavaScript without any frameworks. – Alex W Oct 29 '14 at 14:32
0

try http://logicbox.net/jquery/simplyscroll/ which is better than slick.js, because in slick I had blured images in chrome

Michal - wereda-net
  • 940
  • 9
  • 14