2

ヘッダーを右から左、次に左から右にアニメーション化する関数を作成しようとしています。

ここで開始を確認できます: http://opportunityfinance.net/Test/financeforum2013/

ページが読み込まれると、ヘッダーが右にスライドし始め、左側に画像が表示され、次に戻って右側に画像が表示されます。これを何度も何度もやり続ける必要があります。そして、左右の画像を毎回変更する必要があります。側面の画像として循環させたい画像が 5 つあります。Small Business Finance Forum の画像は、変化する 2 つの側面の画像の間で一定のままで、右から左に、次に左から右に移動する必要があります。

これまでに使用したコードは次のとおりです。ただし、10 秒の jQuery 遅延は機能していないようで、アニメーションが完了したときに関数を再度呼び出す方法がわかりません。

jQuery:

$(document).ready(function(){
    $(".header_right").html('<img src="images/1.jpg" alt="OFN" />');
    $(".header_left").html('<img src="images/2.jpg" alt="OFN" style="max-height: ' + $("div.header").height() + 'px' + ';" />');
    slide();
});

function slide(slideVar)
{
    slideVar = !slideVar ? 2 : slideVar;
    slideVar = slideVar > 5 ? 1 : slideVar;

    $(function () {
        var mrgLeft = parseInt($(".header_right").css('marginLeft'),10) == 0 ? $(".header_right").outerWidth() : 0;
        $(".header_left").html('<img src="images/' + slideVar + '.jpg" alt="OFN" style="max-height: ' + $("div.header").height() + 'px' + ';" />');

        $("img.hImage").delay("10000").animate({ marginLeft: mrgLeft + 'px' }, { duration: 3000, queue: false });
        $(".header_left").delay("10000").animate({ marginLeft: mrgLeft + 'px'}, { duration: 3000, queue: false });
        $(".header_right").delay("10000").animate({ 'right': '-' + mrgLeft + 'px'}, { duration: 3000, queue: false });
    });
    slideVar++;
}

HTML セットアップ:

<div class="header">
    <img class="hImage" src="images/header.jpg" alt="Small Business Finance Forum" />
    <div class="header_right"></div>
    <div class="header_left"></div>
</div>

CSS:

.hImage
{
    width: 64%;
}

div.header_right
{
    position: absolute;
    display: block;
    right: -10px;
    top: 0px;
    width: 35.5%;
}

div.header_left
{
    position: absolute;
    display: block;
    left: -35.5%;
    top: 0px;
    width: 35.5%;
}

div.header
{
    box-sizing: border-box;
    background-color: #00457E !important;
    width: 100%;
}

基本的に、メインの「header.jpg」画像を左右にスライドさせ、左右の画像を5.jpgまで変更するたびにスライドさせたいだけです。1.jpg から 5.jpg にループする必要があります。しかし、主に、遅延の問題を修正する方法がわかりません (機能しないため)。アニメーションが完了したときに、slide() 関数内でループさせる方法もわかりません。

誰かがこれを始めるのを手伝ってくれませんか?

みんなありがとう ：）

4

1 に答える 1

0

開始点として使用したい小さな画像スライダーを作成しました。id を持つ固定幅のコンテナを使用し#containerます。その中には、3 つの異なるイメージのコンテナーがあります。必要に応じて、css でこれらすべての幅を変更できます。

アニメーションは完全な関数を使用して関数を呼び出しswapImgます。これにより、画像コンテナーが移動した方向に応じて、左または右の画像が入れ替わります。

スワップされた画像はimage配列から取得されます。そのため、別の画像が別の側に表示されます。そのため、2 つおきの画像が右側に表示されます... これは、配列内で偶数の画像を使用するか、スクリプトを変更する必要があることを意味します。

ここにフィドルがあります

http://jsfiddle.net/Rgh2B/5/

于 2013-05-06T08:37:32.130 に答える