loop carousel jquery [duplicate]

问题

Possible Duplicate:
my carousel does not work

am a bit puzzled! i got this carousel am creating and i desire that it loops. everything else works out fine, but, when the last image has slid up i want the first one to do the same after it, then the second...infinitely. i have tried many things like appending the first image to the last. i have also tried showing back the images after the last(this one tries but gives an undesirable effect).

i need to be shown what tweaks i need to make. thanks big time!

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>

回答1:

Instead of toggling your images that will make the code unreadable and full of z-index changes, just animate the scrollTop of the container element

Animate the scrollTop and inside a callback, redo the loop function and:
reset the scrollTop to 0 and
remove the first element, appending it after the the last one

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>

回答2:

What you need to do is make a second copy of your images, stick them on the end of the existing ones. That way when you pass the "last" image, the "first" image is visible.

The trick is then to reset the position of the whole lot once the copied "first" image gets to the end of the viewable area.

来源：https://stackoverflow.com/questions/13586890/loop-carousel-jquery

标签

jquery

loops

carousel

infinite