Прокрутка изображения шатер javascript - PullRequest
Новая
       18

Прокрутка изображения шатер javascript

6 голосов
/ 07 декабря 2011

В настоящее время я хочу сделать выделение из нескольких изображений, но мой код допускает только одно.Знаете ли вы, как я мог бы добавить несколько изображений в этот код?(Я уже пробовал добавлять изображения непосредственно в элемент 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>

1 Ответ

6 голосов
/ 06 сентября 2012

Я собрал для вас такой слайдер.Не требуется никаких фреймворков, хотя есть некоторые кросс-браузерные проблемы, с которыми я не сталкивался (в том числе IE до версии 8 по-разному работал с scrollWidth).

Сначала расположите код так:

Добавьте немного 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

...