循环轮播jquery [英] loop carousel jquery

问题描述

可能重复:
我的旋转木马不起作用

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>

推荐答案

仅animate容器的scrollTop而不是切换使代码不可读并充满z-index更改的图像.元素

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

• 对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>

这篇关于循环轮播jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！