滚动图像选框javascript

Question

我目前想要制作几个图像的选框,但我的代码只允许一个.你知道我可以在这段代码中添加几个图像吗？(我已经尝试将图像直接添加到正文中的div元素中 - 它不起作用.)

   <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>

Answer 1

我已经把这样的滑块放在一起了.没有必要的框架,虽然有一些我没有处理的跨浏览器问题(包括版本8之前的IE处理scrollWidth不同).

首先,安排代码如下:

<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>

像这样添加一些CSS:

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

现在应该保留的只是javascript来保持它的运行.一旦它一直滚动,它将跳回到开头; 它应该看起来是连续的,因为它复制了最后的所有图像:

(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);

在一个jsfiddle