1

jquery を使用して、div セット内に残っている画像をスライドさせてオーバーフローを非表示にし、最初の画像を削除して最後に追加することで、リスト内の画像の数が常に同じになり、毎回左にスライドし続ける関数が起動します:

function xxx(){
    var first = $('.ximg:first');
    $('.ximg').animate({ left: '-=200'}, 2000, function(){ $('.ximg').css({left: '0'}); first.insertAfter($('.ximg:last'));});

}
setInterval(function(){ xxx () }, 8000);

<div style="position:relative; overflow:hidden; width: 400px; height: 150px;">
    <div class="ximg" style="position: relative; width: 200px; min-height:150px; background:red"></div>
    <div class="ximg" style="position: relative; width: 200px; min-height:150px; background:orange"></div>
    <div class="ximg" style="position: relative; width: 200px; min-height:150px; background:green"></div>
    <div class="ximg" style="position: relative; width: 200px; min-height:150px; background:yelow"></div>
</div>

しかし、コンテナーには 1 つの画像しかありません。2 番目の画像は、関数が起動したときにのみ追加されます。この種のことを行うために既製のプラグインがあることは知っていますが、シンプルにしたいので、jquery に比較的慣れていないにもかかわらず、自分で作成してみることを好みます。

http://jsfiddle.net/rgct2/6/

コンテナーの幅は 400 で、各 div の幅は 200 であるため、最初と 3 番目の div の % が表示されるアニメーション中でも、常に 2 つの div が表示されます。

4

2 に答える 2

1

より良い方法は、最初の要素の幅をアニメーション化することです。そのため、すべての要素をアニメーション化する必要はありません。

function xxx() {
    var origWidth = $('.ximg:first').width();
    $('.ximg:first').animate({
        width: 0
    }, 2000, function() {$(this).insertAfter($('.ximg:last')).css({width: origWidth})});
}

要素には CSS の問題もあります。親要素には が必要white-space: nowrapなので、要素が表示されていなくても同じ行に表示されます。子要素は を持つ必要がdisplay:inline-blockあるため、行内 (つまりインライン) にすることができ、構成可能な幅を持つことができます。

注意すべきもう 1 つのことは、<div>s 間のスペースです。改行を含む意図しないスペースがないことを確認する必要があります。

更新されたデモを参照してください: http://jsfiddle.net/rgct2/7/。

于 2012-09-27T05:25:59.017 に答える
0

remove を使用する代わりに、「detach」を使用する

function xxx(){

     $('.ximg').css({left: '0'});
     $('.ximg').animate({ left: '-=200'}, 2000, function(){ });
     $('.ximg:first').detach().insertAfter( $('.ximg:last') );
}
于 2012-09-27T05:05:36.140 に答える