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

In a jsfiddle

Answer 2

试试 http://logicbox.net/jquery/simplyscroll/ 这比 slick.js 更好，因为在 slick 中我在 chrome 中模糊了图像

滚动图像选框javascript

2 个答案: