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!

This is all you need: :)

jsBin demo

$(function(){  // Document ready shorthand

    function loop() {
      $('#slideshow').stop().animate( { scrollTop:200 }, 700, 'linear', function() {
        $(this).scrollTop( 0 ).find( 'div:last' ).after( $('div:first', this) );
        loop(); // go loop!
      });
    }

    loop(); // Start!

});

Animate the scrollTop and inside a callback redo the loop function and:

• reset the scrollTop to 0
• simultaneously removing the first element and appending it after the the last one!

回答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.