Question

我正在尝试循环播放一系列图片，以便在我的网页上制作照片查看器。循环方法工作正常，但将消息传递给css则不然。我想知道我的javascript代码中是否存在任何语法问题或我错过的概念。我知道骑车是有效的，因为我的警报正在发挥作用。

var changeIt = ""
var backgroundPic = new Array(4);

backgroundPic[0] = '("images/displayPic1.jpg")';
backgroundPic[1] = '("images/displayPic2.jpg")';
backgroundPic[2] = '("images/displayPic3.jpg")';
backgroundPic[3] = '("images/displayPic4.jpg")';
backgroundPic[4] = '("images/displayPic5.jpg")';

var picCounter = 0;
var numberOfPics = 5;
var picTimer;

function setPic(){
    alert("hi I want this pic: " + backgroundPic[picCounter]);
    $('slider').css('background-image', url + "backgroundPic[picCounter]");

    picCounter += 1;
        if(picCounter >= numberOfPics){
        picCounter = 0;
    }

}

$(document).ready(function(){

    $('.slider').css('background-image', backgroundPic[picCounter]);

    picTimer = setInterval(setPic, 2000);

});

Answer 1

问题是由于您在连接CSS属性值时使用的语法不正确。试试这个：

var backgroundPic = [ 'images/displayPic1.jpg', 'images/displayPic2.jpg', 'images/displayPic3.jpg', 'images/displayPic4.jpg', 'images/displayPic5.jpg' ];    
var picCounter = 0;
var picTimer;

function setPic() { 
    // note the . in the jquery object below to indicate a class selector
    $('.slider').css('background-image', 'url("' + backgroundPic[picCounter % backgroundPic.length] + '")');
    picCounter++;
}

$(document).ready(function() {
    picTimer = setInterval(setPic, 2000);
    setPic();
});

Answer 2

你必须像这样设置背景图像：

$('.slider').css('background-image', "url('" + backgroundPic[picCounter] + "')");

Answer 3

您在第setPic行的第二行反转了引号的定位。

尝试：$('slider').css('background-image', 'url' + backgroundPic[picCounter]);

Answer 4

在你的setPic函数中，这一行

$('slider').css('background-image', url + "backgroundPic[picCounter]");

在$('.slider')上没有错过点？

Answer 5

您需要在imageUrl之前和之后加入双引号（＆＃34;），如下所示：

$('slider').css('background-image', 'url("' + backgroundPic[picCounter] + '")');

这样，如果图像有空格，它仍然会被设置为属性。

无法改变css＆＃39; background-image＆＃39;与Jquery

5 个答案: