3

重複の可能性：
カルーセルが機能しない

少し戸惑っています！私はこのカルーセルを作成してもらいました、そして私はそれがループすることを望みます。他のすべてはうまくいきますが、最後の画像が上にスライドしたとき、私は最初の画像にその後同じことをさせ、次に2番目の画像を...無限に動かしたいと思います。最初の画像を最後の画像に追加するなど、さまざまなことを試しました。私はまた、最後の後に画像を表示しようとしました（これは試みますが、望ましくない効果をもたらします）。

必要な調整を表示する必要があります。どうもありがとうございました！

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>
4

2 に答える 2

4

コードを読み取れなくし、z-index の変更でいっぱいになるイメージを切り替える代わりに、コンテナー要素のanimatescrollTop

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

于 2012-11-27T15:42:26.837 に答える
0

必要なことは、画像の 2 番目のコピーを作成し、既存の画像の最後に貼り付けることです。そうすれば、「最後の」画像を渡すと、「最初の」画像が表示されます。

トリックは、コピーされた「最初の」画像が表示可能領域の最後に到達したら、ロット全体の位置をリセットすることです。

于 2012-11-27T15:07:39.800 に答える