Как мне сделать этот «слайдер» javascript, чтобы просто вращать изображения бесконечно?

Question

Я пытаюсь помочь другу, у которого на главной странице есть вращающаяся панель, где изображения не прокручиваются по бесконечному циклу. Они прокручивают, затем возвращаются к началу и начинают снова.

Вот фрагмент кода Javascript, который он предоставил:

$(function () {
    if ($('#customScroller').length != 0) { //check if we're on the right page
        var width = $('#slider a').length;
        $('#slider').width(width * 930); //give the slider the appropriate width
        var count = 0;
        initial slide position

        function slide() {
            if (count < (width - 1)) { //we want to check if at end of the slider
                count++;
            }
            else {
                count = 0;
            }
            var toMove = 0;
            toMove = (-1 * (count * 930));
            $('#slider').animate({
                left: toMove
            }, 1000, function () {
                //complete
            });
        }
        var s = window.setInterval(slide, 8500);
    }
});

Сколько стоит преобразовать его в простой цикл бесконечно?

РЕДАКТИРОВАТЬ: Вот сайт: http://www.ralphshardwood.com

Answer 1

Вы захотите оценить это по-другому.Чтобы достичь желаемого эффекта, вы захотите расположить слайды абсолютно по правому краю контейнера и анимировать следующий слева, убедившись, что он имеет более высокий z-индекс (а не перемещать весь список, который поддерживаетВаш заказ.

Вы можете получить суть ниже и принять это в существующую разметку. Вот рабочая jsFiddle: http://jsfiddle.net/rgthree/mGeqx/

if ($('#slides').length != 0) {
    var currentIndex = 0, slides = $('#slides > li');
    $(slides[currentIndex]).css('left','0%');
    function slide() {
        var current, next;
        current = $(slides[currentIndex]);
        currentIndex++;
        if(currentIndex === slides.length){
          currentIndex = 0;   
        }
        next = $(slides[currentIndex]);
        next.css('left','100%');
        next.css('z-index',parseInt(current.css('z-index'), 10)+1);
        next.animate({left: '0%'}, 1000);
    }
    var s = window.setInterval(slide, 2000);
}

Разметка:

<ul id="slides">
    <li>Slide1</li>
    <li>Slide2</li>
    <li>Slide3</li>
    <li>Slide4</li>
    <li>Slide5</li>
</ul>​

CSS:

ul#slides {position:relative; width:400px; height:200px; overflow:hidden;}
ul#slides > li {
    position:absolute;
    top:0px;
    left:100%;
    width:100%;
    height:100%;
    background:#777;
    color:#FFF;
    z-index:1;
}

ul#slides > li:nth-child(even) {background:#444;}