Question

我想在加载后的前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执行如上所述。

Answer 1

在我的头脑中，我建议如下：

$(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中验证这一点。

Answer 2

以下是应该执行所需任务的代码样式表：您需要编写样式/图像等

<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非常简单。如果你不能这样做，请发表评论。

Answer 3

<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>

在5秒内加载后显示不同的背景，然后明确更改

3 个答案: