1

@j08691 は、jQuery アニメーションで子を継続的に回転させるにはどうすればよいですか?という質問に回答しました。 良い例で。ただし、彼の例を拡張する必要があり、動的に行う方法がわかりません。これは私が持っているものの小さなグラフィックです:

ここに画像の説明を入力

灰色のボックスは私のバナー グループで、フェードする 4 つのバナー項目が含まれています。緑色のボックスはボタン 1 から 4 です。ボタン 1 をクリックすると、banneritem 1 が表示され、他のすべてが非表示になります。ローテーション プロセスは、バナー アイテム 2 で続行する必要があります。ボタン 4 をクリックすると、banneritem 4 が表示されます。

jsfiddle : http://jsfiddle.net/wxvTp/

html:

<div class="col3 bannergroup">
    <div class="banneritem">
        <h1>Lorem Ipsum 1</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <a href="#" title="Jetzt unverbindliches Angebot anfordern" class="btn orange">Wir freuen uns auf Ihr Projekt.</a>
    </div>
    <div class="banneritem">
        <h1>Lorem Ipsum 2</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <a href="#" title="Jetzt unverbindliches Angebot anfordern" class="btn orange">Wir freuen uns auf Ihr Projekt.</a>
    </div>
    <div class="banneritem">
        <h1>Lorem Ipsum 3</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <a href="#" title="Jetzt unverbindliches Angebot anfordern" class="btn orange">Wir freuen uns auf Ihr Projekt.</a>
    </div>
    <div class="banneritem">
        <h1>Lorem Ipsum 4</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <a href="#" title="Jetzt unverbindliches Angebot anfordern" class="btn orange">Wir freuen uns auf Ihr Projekt.</a>
    </div>                              
    <div class="slider-control-nav desktop"> <!-- buttons are here -->
        <a class="button1" href="#">
            <img src="images/icon-slider-control-cs.png" alt="Grafikdesign" />
        </a>
        <a href="#" class="button2">
            <img src="images/icon-slider-control-gd.png" alt="Content Strategy" />
        </a>
        <a class="button3" href="#">
            <img src="images/icon-slider-control-wd.png" alt="Grafikdesign" />
        </a>
        <a class="button4" href="#">
            <img src="images/icon-slider-control-cs.png" alt="Content Strategy" />
        </a>
    </div>
</div>

編集:これは私が試したものですが、a) 機能していません。b) 4 つのボタンすべてに対して実行する必要があります。

   $( ".button4" ).click(function() {
    $('div.bannergroup').each(function () {
        $('div.banneritem', this).not(':nth-child(4)').hide();
        var thisDiv = this;
        setInterval(function () {
            var idx = $('div.banneritem', thisDiv).index($('div.banneritem', thisDiv).filter(':visible'));
            $('div.banneritem:eq(' + idx + ')', thisDiv).fadeOut(0, function () {
                idx++;
                if (idx == ($('div.text', thisDiv).length)) idx = 0;
                $('div.banneritem', thisDiv).eq(idx).fadeIn(600);
            });
        }, 6000);
    });
});
4

1 に答える 1

1

これを見てください：http://jsfiddle.net/Palpatim/TfK4J/6/

以前のコードに関する注意事項:

  • .banneritemjquery ではなく CSS を使用して初期状態を設定します。ブラウザーの作業が少なくなり、jquery が何を非表示にして何を表示するかを判断するため、コンテンツの「フラッシュ」が発生する可能性が低くなります。
  • あなたは電話会議で多くの作業を行っていましたsetIntervalが、実際にやりたかったことは新しいバナーを表示することだけでした。間隔内で実行される作業を減らすために、可能な限りコードをリファクタリングします

幸運を。

[編集: フィドルの URL を にあるものに修正display:blockしましたbanneritem:first-child]

于 2013-10-29T15:40:33.090 に答える