циклическая карусель jquery

Возможный дубликат:
моя карусель не работает

немного озадачен! У меня есть эта карусель, которую я создаю, и я хочу, чтобы она зацикливалась. все остальное работает нормально, но, когда последнее изображение соскользнуло, я хочу, чтобы первое делало то же самое после него, а затем второе ... бесконечно. Я пробовал много вещей, таких как добавление первого изображения к последнему. я также пытался показать изображения после последнего (этот пытается, но дает нежелательный эффект).

мне нужно показать, какие настройки мне нужно сделать. большое спасибо!

var images = $("#slideShow div");
var index = 0;
for (i = 0; i < images.length; i++) {
    $(images[i]).addClass("image-" + i);
}

setInterval(function() {
    $(".image-" + (index)).slideUp(1000);
    if (index < images.length - 1) {
        index += 1;
    }   
    else {
        index = 0;
    }    
}, 500);


  #slideShow {
height:20em;
width:80%;
float:right;

}

#slideShow div{
line-height:20em;
float:right;
}   

   #slideShow img{
vertical-align:middle;
border:solid 5px #A5A5A5;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

        <div id="slideShow">
                    <?php

                            $dir = "carousel";
                        $dh = opendir($dir);
                        while($slide = readdir($dh)){
                                $items[] = $slide;
                            }

                            for($i=0; $i<sizeof($items); $i++){
                                                            if($items[$i] !=   "." && $items[$i] != ".."){
                                                   $imagePath = $dir."/".$items[$i];
                                                   $image = "<div>"."<img src = \"".$imagePath."\""." />"."</div>";
                                                    echo $image;

                                        }

                                }
                            closedir($dh);

                        ?>

            </div>

person Wagaba    schedule 27.11.2012    source источник
comment
Ах, без паузы? И кстати, ваша анимация слайдов медленнее, чем тикает setInterval. Для меня это не имеет смысла. Демонстрационная скрипка будет принята с благодарностью   -  person Roko C. Buljan    schedule 27.11.2012
comment
Ага! без пауз! да, я сделал это намеренно в целях разработки; ибо у меня есть пул изображений, которые php-скрипт читает из папки. любая помощь?   -  person Wagaba    schedule 27.11.2012
comment
У меня есть идея, дай мне просто установить демо, хорошо? :)   -  person Roko C. Buljan    schedule 27.11.2012


Ответы (2)


Вместо того, чтобы переключать изображения, что сделает код нечитаемым и полным изменений z-индекса, просто animate scrollTop элемента контейнера

  • Анимируйте scrollTop и внутри обратного вызова, повторите функцию цикла и:
  • сбросьте scrollTop до 0 и
  • удалить первый элемент, добавив к нему after последний

var $slideShow = $('#slideshow');

function loop() {
  $slideShow.stop().animate({
    scrollTop: 200
  }, 800, 'linear', function() {
    $(this).scrollTop(0).find('div:last').after($('div:first', this));
    loop(); // Recursion
  });
}

loop(); // Start
#slideshow {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

#slideshow img {
  display: block;
}
<div id="slideshow">
  <div><img src="http://placehold.it/200x200/cf5&text=1" alt=""></div>
  <div><img src="http://placehold.it/200x200/f0f&text=2" alt=""></div>
  <div><img src="http://placehold.it/200x200/444&text=3" alt=""></div>
  <div><img src="http://placehold.it/200x200/f70&text=4" alt=""></div>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

person Roko C. Buljan    schedule 27.11.2012
comment
у вас есть демо. Если вы хотите увидеть, что происходит, просто удалите overflow:hidden; - person Roko C. Buljan; 27.11.2012
comment
@ Вагаба... хорошо? Что новенького? ты все еще пытаешься? - person Roko C. Buljan; 27.11.2012
comment
подождите минутку... я должен покончить со всем своим кодом, или? если нет, то где я должен поместить этот код или после чего он должен появиться? - person Wagaba; 27.11.2012
comment
Вы можете ясно видеть, что в моем демо нет запятой вашего кода. Где проблема братан? - person Roko C. Buljan; 27.11.2012
comment
хахахаха! смешной! Хорошо, позволь мне сделать это. - person Wagaba; 27.11.2012
comment
это статично, на этот раз! - person Wagaba; 27.11.2012
comment
@Wagaba смотрите демо, перейдите на JSBin -> Загрузите и найдите время, чтобы изучить! И дайте мне знать, если что-нибудь положительное произошло с вашей стороны! :) Не забудьте добавить функцию document ready, как в коде выше. - person Roko C. Buljan; 27.11.2012
comment
на удивление демо работает просто отлично! - person Wagaba; 27.11.2012
comment
единственная проблема заключалась в том, что у моего div в слайд-шоу была верхняя буква S, и я только что вставил ваш код с нижней буквой. теперь проблема одна: не прокручивается плавно! - person Wagaba; 27.11.2012
comment
Измените «линейный» на «качающийся», если хотите. И покажите демо, потому что здесь все работает нормально - person Roko C. Buljan; 27.11.2012

Что вам нужно сделать, это сделать вторую копию ваших изображений, вставить их в конец существующих. Таким образом, когда вы передаете «последнее» изображение, «первое» изображение становится видимым.

Хитрость заключается в том, чтобы сбросить положение всего лота, как только скопированное «первое» изображение достигнет конца видимой области.

person Diodeus - James MacFarlane    schedule 27.11.2012
comment
Я пытаюсь понять вашу точку зрения, но похоже, что я уже пробовал это с append(). это вместо этого искажает мои картинки, ничего бета. можете ли вы продемонстрировать со ссылкой на мои простые строки кода? - person Wagaba; 27.11.2012
comment
хорошо! согласно вашему запросу. Это генерирует html: ‹div id=slideShow› ‹?php $dir = carousel; $dh = открытый каталог ($ каталог); while($slide = readdir($dh)){ $items[] = $slide; } for($i=0; $i‹sizeof($items); $i++){ if($items[$i] != . && $items[$i] != ..){ $imagePath = $dir ./.$элементы[$i]; //продолжение следует... - person Wagaba; 27.11.2012
comment
//продолжение здесь $image = ‹div›.‹img src = \.$imagePath.\. /›.‹/дел›; эхо $изображение; } } закрытый($dh); ?› ‹/дел› - person Wagaba; 27.11.2012
comment
css:#slideShow { height:20em; ширина:80%; поплавок: справа; переполнение: скрыто; } #slideShow div{ line-height:20em; поплавок: справа; } #slideShow img{ vertical-align:middle; граница: сплошная 5px #A5A5A5; радиус границы: 5px; -moz-граница-радиус: 5px; -webkit-граница-радиус: 5px; } - person Wagaba; 27.11.2012
comment
Вам действительно следует отредактировать вопрос и поместить туда образцы кода. - person Diodeus - James MacFarlane; 27.11.2012