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>

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