0

読み込み後最初の5秒間、1秒かそれ以下ごとに違う背景を表示したいです。そして、この 5 秒後に明確な背景を設定したいと思います。

私はすでにdivのクラスを設定しています:

<div id="plateau" class="step01">
<div id="plateau-fond">

そして、CSS で背景を設定します。

#plateau.step-01 #plateau-fond
 {
  background-image:url('../img/plateau-03-step-01.png');
 }

上記のように、javascriptまたはjQueryを使用して実行したいと思います。

4

3 に答える 3

3

頭のてっぺんから、次のようなことを提案します。

$(function() {
  var step = 1;

  var interval = window.setInterval(function() {
     var $plateau = $("#plateau");
     $plateau.removeClass("step0" + step);
     step++;
     $plateau.addClass("step0" + step);
     if(step == 5) { 
         window.clearInterval(interval);
     }
  }, 1000);
});

すぐに jsfiddle でこれを確認します。

于 2012-10-11T06:24:25.960 に答える
0 
<style type="text/css">
    .step00{background:#000000;}  /*this is the initial background when page loaded*/
.step01{background:#454545;}  /*First change after 1 sec*/
.step02{background:#333333;}  /*2nd change after 2 sec*/
.step03{background:#234567;}  /*3rd change after 3 sec*/
.step04{background:#789564;}  /*4th change after 5 sec*/
.step05{background:#cccccc;}  /*5th change after 5 sec*/
.stepfixed{background:#fff222;} /*final definitive bg after 6 sec*/
</style>

    <div id="plateau" class="step00">
    <div id="plateau-fond">

    <script type="text/javascript">
        var count = 0;
        var flag = 1;
        jQuery(window).load(function () {
            var interval = window.setInterval("change_bg()",1000); //1000 = 1sec here
        });
        function change_bg() {
            if(count == 0)
                jQuery('div#plateau').removeClass('step00');
            else
                jQuery('div#plateau').removeClass('step0'+flag);
            count++;
            if(flag % 2 == 0)
                flag = 1;
            else
                flag = 2;
            if(count > 5) {
                jQuery('div#plateau').addClass('stepfixed');
                window.clearInterval(interval);
            } else {
                jQuery('div#plateau').addClass('step0'+flag);
            }
        }
    </script>
于 2012-10-11T07:12:31.413 に答える
0

スタイルシートが必要なタスクを実行するコードは次のとおりです。スタイル/画像などを記述する必要があります

<style type="text/css">
    .step00{background:#000000;}  /*this is the initial background when page loaded*/
.step01{background:#454545;}  /*First change after 1 sec*/
.step02{background:#333333;}  /*2nd change after 2 sec*/
.step03{background:#234567;}  /*3rd change after 3 sec*/
.step04{background:#789564;}  /*4th change after 5 sec*/
.step05{background:#cccccc;}  /*5th change after 5 sec*/
.stepfixed{background:#fff222;} /*final definitive bg after 6 sec*/
</style>

HTML

<div id="plateau" class="step00">
<div id="plateau-fond">

<script type="text/javascript">
    var count = 0;
    jQuery(window).load(function () {
        var interval = window.setInterval("change_bg()",1000); //1000 = 1sec here
    });
    function change_bg() {
        jQuery('div#plateau').removeClass('step0'+count);
        count++;
        if(count > 5) {
            jQuery('div#plateau').addClass('stepfixed');
            window.clearInterval(interval);
        } else {
            jQuery('div#plateau').addClass('step0'+count);
        }
    }
</script>

***上記のコードが機能するには Jquery が必要です。jquery を含めることを忘れないでください。jquery を含めるのはとても簡単です。これができない場合は、コメントを残してください。

于 2012-10-11T06:58:51.340 に答える