Question

可能重复：
my carousel does not work

我有点不解！我得到了这个旋转木马正在创造，我希望它循环。其他一切都很好，但是，当最后一张图像滑落时我希望第一个在它之后做同样的事情，然后第二个......无限地做。我尝试了很多东西，比如将第一张图片追加到最后一张。我也试过在最后一个之后显示图像（这个尝试但会产生不良影响）。

我需要展示我需要做出的调整。非常感谢！

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>

Answer 1

而不是切换你的图像会使代码不可读并且充满z-index变化...... 仅animate容器元素的scrollTop！

这就是您所需要的：：）

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!

});

为scrollTop设置动画并在回调内部重做循环函数并：

将scrollTop重置为0
同时移除第一个元素并将其after追加到最后一个元素！

Answer 2

您需要做的是制作图像的第二个副本，将它们粘贴在现有图像的末尾。这样，当您传递“最后”图像时，“第一”图像就可见了。

一旦复制的“第一”图像到达可视区域的末尾，诀窍就是重置整个地段的位置。

循环旋转木马jquery

2 个答案:

jsBin demo