0

私のコードでは、4 つの画像をスクロールする div を取得できますが、コードを見ると、別の画像にスクロールするには「.next」を追加し続ける必要があります。jquery でスクロールする画像の量を決定したくありません。jquery が div を調べ続けて、すべての画像をスクロールしてから、一番上に戻るようにします。私のコードを見てください。マルチ KB プラグインと比較して、数行のコードでやりたいことをほぼ達成できたので、別のプラグインを使用したくありません。

ps: 「-165px」が必要な理由はわかりませんが、画像から画像へスクロールするときにすべてが完全に整列します。

Jクエリ:

Jクエリ:

$(document).ready(function(){
    $('.rotate_container').everyTime(10, function (){
        $('.rotate_container').animate({scrollTop: $('img').offset().top - 165}, 2000).delay(1000)
        .animate({scrollTop: $("img").next().offset().top - 165}, 2000).delay(1000)                   
        .animate({scrollTop: $("img").next().next().offset().top - 165}, 2000).delay(1000)
        .animate({scrollTop: $("img").next().next().next().offset().top - 165}, 2000).delay(1000)
    });
});

何か案は？

4

5 に答える 5

2

私はそれをテストしませんでしたが、これはうまくいくようです

$(document).ready(function(){
    var container = $('.rotate_container');
    var images = container.find('img');
    container.everyTime(10, function (){
        images.each(function() {
            container.animate({scrollTop: $(this).offset().top - 165}, 2000).delay(1000);
        });
    });
});
于 2010-07-15T02:32:23.670 に答える
0

http://flesler.blogspot.com/2007/10/jqueryscrollto.html このプラグインには約束があります。

于 2010-07-15T02:29:33.253 に答える
0

div私の解決策では、コンテナ内に追加で 1 つと CSS ルールを 1つ配置する必要があります。こんなふうになります：

<script type="text/javascript">
$(document).ready(function(){
    var top = 0;
    var up = true;
    var wrap = $(".rotate_container > div ") // shortcut :)

    function slide() {
        wrap.animate( { "top" : top+"px" }, 400 );

        if( Math.abs( top ) > wrap.height() ){ // if all inner_wrap is outside container
            up = false; 
        }
        else if( top >= 0 ) {
            up = true
        }
        if( up ) top -= 165;
        else top += 165;

        setTimeout( slide, 500 ) // call function slide after 500 ms
    }
    setTimeout( slide, 500 ) // call function slide after 500 ms
});
</script>

<style type="text/css">
.rotate_container {
    max-height:292px;
    max-width:760px;
    height:292px;
    width:760px;
    overflow:hidden;
    padding:0;
    margin:0;}

.rotate_container > div {
    position: relative;
    top: 0; left: 0;
}

.rotate_container img {
    height:292px;
    width:760px;}
</style>


<div class="rotate_container grid_12">
    <div id="inner_wrap">
        <img src="{{ MEDIA_URL }}/employlogo.png" class="top" />
        <img src="{{ MEDIA_URL }}/employlogo.png" class="middle" />
        <img src="{{ MEDIA_URL }}/employlogo.png" class="midbottom" />
        <img src="{{ MEDIA_URL }}/employlogo.png" class="bottom" />
        <img src="{{ MEDIA_URL }}/employlogo.png" class="verybottom" />
    </div>
</div>

まあ、それはきれいではありませんが、うまくいきます。最初はあなたのスニペットを誤解していました、ごめんなさい。

于 2010-07-15T02:32:53.780 に答える
0

jCarousel またはその弟分である jCarouselLite をチェックしてみてください。これは簡単な効果で画像をスクロールします。

上記の解決策として、最初の img を変数に割り当ててから、コールバックでインクリメントすることができます。次のコードでは、アラート出力は「Second」です。

<div>First</div>
<div>Second</div>
<script type="text/javascript">
$(document).ready(function(){
    var test = $('div');
        test = test.next();
        alert(test.html());
});
</script>

したがって、コードを変更するには:

$(document).ready(function(){
    var img = $('.rotate_container img');
    $('.rotate_container').everyTime(10, function (){
        $('.rotate_container').animate({scrollTop: img.offset().top - 165}, 2000,null,function() { img = img.next(); }).delay(1000)
        .animate({scrollTop: img.offset().top - 165}, 2000,null,function() { img = img.next(); }).delay(1000)
        .animate({scrollTop: img.offset().top - 165}, 2000,null,function() { img = img.next(); }).delay(1000)
          .animate({scrollTop: img.offset().top - 165}, 2000,null,function() { img = img.next(); }).delay(1000)
    });
});

等

関数を使用してそれを変更して、さらにクリーンにすることもできます。

于 2010-07-15T02:37:31.600 に答える
0

再帰。あなたが望むことをする関数を書いてください（私は特定のコードを手伝いますが、あなたが何をしようとしているのかわかりません）。関数に最初の画像を取り込ませます。関数で必要なことを行い、関数を閉じる前に、現在の関数を呼び出して . next() 変数に送信します。

于 2010-07-15T02:37:47.560 に答える