1

Web サイトのスプラッシュページにスライドショーを表示するために、数行の独自のコードを作成する必要がありました。HTML5 と css3 で Web サイトを設計したため、プラグインを使用できませんでした。画像はブラウザーと同期してサイズ変更されました。さて、実際の問題になると、最後の画像は、リスト内の各画像が撮影した時間の 2 倍の時間を要します。以下は、貼り付けた HTML と JavaScript です。

HTML

  <div id="backgrounds">
    <div class="bgs" style="z-index:1000;">
        <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
        <img src="images/main_nop.jpg" alt="" class="background" />
    </div>

    <div class="bgs" style="z-index:999; display: none">
        <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
        <img src="images/main_jkl.jpg" alt="" class="background" />
    </div>

    <div class="bgs" style="z-index:998; display: none">
        <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
        <img src="images/main_ghi.jpg" alt="" class="background" />
    </div>

    <div class="bgs" style="z-index:997; display: none">
        <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
        <img src="images/main_def.jpg" alt="" class="background" />
    </div>

    <div class="bgs" style="z-index:996; display: none">
        <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
        <img src="images/main_abc.jpg" alt="" class="background" /> 
    </div>
  </div>

ジャバスクリプト

    var count = 0;
    var repeatCount = 0;
    var backgrounds = $('.bgs').length;
    function startSlideShow() {
        myRecFunc = setInterval(function () {
            if (count == backgrounds) {
                $('.bgs').eq(0).stop(true, true).hide(1000, 'easeOutExpo');
                $('.bgs').eq(backgrounds - 1).show(1000, 'easeOutExpo');
            }
            if (count < backgrounds) {
                $('.bgs').eq(count).stop(true, true).show(1000, 'easeOutExpo');
                $('.bgs').eq(count - 1).stop(true, true).hide(1000, 'easeOutExpo');
                count++;
            }
            else {
                count = 0;
                repeatCount++;
            }
        }, 1000);
    }
    startSlideShow();

上記のコードの最初の if() は、上で述べた状況を処理するために追加したものです。事前に助けてくれてありがとう。

4

1 に答える 1

2

「else」の場合である間隔全体で何もしないという状態があります。そのチェックを内側に移動して、すぐに発生するようにしてください。

var count = 0;
var repeatCount = 0;
var backgrounds = $('.bgs').length;
function startSlideShow() {
    myRecFunc = setInterval(function () {
        $('.bgs').eq(count).stop(true, true).show(1000, 'easeOutExpo');
        $('.bgs').eq(count - 1).stop(true, true).hide(1000, 'easeOutExpo');
        count++;
        if (count === backgrounds) {
            count = 0;
            repeatCount++;
        }
    }, 1000);
}
startSlideShow();​
于 2012-08-14T20:07:08.080 に答える