0

3 つの画像を右から左に回転させるスライドショーがあります。前の画像が完全にスライドした後に画像がスライドインすることを除いて、すべて正常に機能します（画像間に空白が残ります）。setIntervalandhideとshow関数でさまざまなタイミングを試しましたが、役に立ちませんでした。

JavaScript:

$(document).ready(function(){
    $(".slider .1").show("fade", 500);
    $(".slider .1").delay(5500).hide("slide", {direction:"left"}, 500);

    var sc = $(".slider img").size();
    var count = 2;

    setInterval(function() {
        $(".slider ."+count).show("slide", {direction:"right"}, 500);
        $(".slider ."+count).delay(5500).hide("slide", {direction:'left'}, 500);

        if(count == sc) {
            count = 1;
        } else {
            count = count + 1;
        }
    }, 6500);

});

CSS:

.slider {
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 30px auto;
    background-image: url('http://www.thatssotrue.com/images/ajax_loader.gif');
    background-size: 50px 50px;
    background-position: center center;
    background-repeat: no-repeat;
}

.slider img {
    width: 200px;
    height: 200px;
    display: none;
}

HTML:

    <div class="slider">
        <img class="1" src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg" height="200" width="200">
        <img class="2" src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg" height="200" width="200">
        <img class="3" src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg" height="200" width="200">
    </div>

JSFIDDLE : http://jsfiddle.net/6FF4y/2/

画像がスライドイン/スライドアウトするときに、画像を互いにハグする方法についてのアイデアはありますか (間にスペースはありません)。

注: 私はどの画像も所有しておらず、それらがホストされている Web サイトと自分自身を関連付けていません。私が実際に使用している画像は単にディレクトリにあり、URL ではないため、これらを例として使用しました。

どんな助けでも大歓迎です！

4

1 に答える 1

3

これは単にマークアップの場合です。まず、クラス名1が正しくありません2。3クラスを数字で始めることはできません。

次に、イメージを でラップします。<div>ラッパーは常に優れています。次に、3 つのイメージ<div>を内側のラップでラップする必要があります。インナーラップをスライドさせたくなるでしょう。あなたの最善の策は、おそらくjQuery animateを使用してループすることです。

このフィドルはどうですか？http://jsfiddle.net/6FF4y/4/

于 2013-08-25T01:32:57.207 に答える