Question

我想经常更改我的背景图片，但有些人有想法

            var pics = function() {
                var $pic_holder = $(".holder");
                var timer = setTimeout(function () {
                    if ($pic_holder.css("background-image") !== "url(/picA.png)") {
                        $(".pic_holder").css("background-image", "url(/picA.png)")
                    }
                    else {
                        $(".pic_holder").css("background-image", "url(/picB.png)")
                    }
                }, 1000);
            }

由于

Answer 1

将setTimeout更改为setInterval，不要使用相对网址。（/picA.png）我做了一些其他改动：

$(document).ready(function(){
      var $pic_holder = $(".holder");
      setInterval(function () {
          if ($pic_holder.css("background-image") !== "url(http://www.example.com/picA.png)") {
              $pic_holder.css("background-image", "url(http://www.example.com/picA.png)")
          }
          else{
              $pic_holder.css("background-image", "url(http://www.example.com/picB.png)")
          }
          console.log($pic_holder.css("background-image"));
      }, 1000);
});

小提琴：http://jsfiddle.net/mj27g/

Answer 2

变化：

$(".pic_holder").css("background-image", "url(/picA.png)")

到

$pic_holder.css("background-image", "url(/picA.png)");

编辑：此外，正如其他人所指出的那样，使用setInterval，而不是setTimeout

Answer 3

尝试setInterval函数

setInterval(function() {
      // Do something every 2 seconds
}, 2000);

Answer 4

这是一种更好的方法

var $pic_holder = $(".holder"),
    backChanger;

backchanger = (function backchanger () {
    if (!$pic_holder.data('bgphoto') !== 'photo-A') {
        bgUrl = '/picA.png';
        bgData = 'photo-A';
    } else {
        bgUrl = '/picB.png';
        bgData = 'photo-B';
    }

    $pic_holder.data('bgphoto', bgData).css("background-image", bgUrl);
    setTimeout(backchanger, 1000);  
}());

确保if语句中的代码执行或者可能是另一个问题。

频繁更改背景图像

4 个答案: