Javascript 如何使用存储在数组中的图像路径迭代更改div背景图像？

我有一个index.html，其中

headerwrap

div的css属性在包含在index.html中的css文件中定义

HTML

}

我已经编写了一个js函数

change_image

来更改div

headerwrap的图像

var image_array= ['url("../img/portfolio/img2.jpg")', 'url("../img/portfolio/img3.jpg")', 'url("../img/portfolio/img4.jpg")'];
var image_index = 0;

var change_image = function(){

    $('#headerwrap').css("background", image_array[image_index]);  
    image_index++;
    if (image_index >= image_array.length){
        image_index = 0;
    }
}

$(document).ready( function(){

    setInterval(change_image, 5000);

 });

change\u image
函数每5秒调用一次，当我看到带有firebug的div时，看起来是这样的

<div id="headerwrap" style="background: url("../img/portfolio/img3.jpg") repeat scroll 0% 0% transparent;">
    <div class="container">
        <div class="row">
            ....
        </div>
    </div>
</div>


....

5秒后，div背景为白色，我看不到第一张图像。我需要做哪些更改才能看到图像旋转
更改背景图像的正确语法如下：

$('#element').css("background-image", "url(/myimage.jpg)");

使用：

图像数组应该有：
url（/path）
而不是
url（'/path'）

var image_数组=['url（./img/portfolio/img3.jpg）'，'url（./img/portfolio/img2.jpg）'，'url（./img/portfolio/img4.jpg）'
我认为您需要将完整的URL（或相对于页面或站点的URL）放入image\u数组中。当您对CSS文件中的背景图像（
url（'../foo.png'）
）使用相对url时，
。/
是相对于CSS文件的。但是，当您使用javascript进行设置时，它是相对于当前页面URL的。
您使用了错误的引号-

style="background: url("../img/portfolio/img3.jpg")

style属性现在只是“background:url”（），因此不会加载

js中图像数组中的元素应该使用这些引号

"url('../img/portfolio/img2.jpg')"

试试这个：

CSS

#headerwrap {
background-image: url(/img/portfolio/img1.jpg);
margin: 0;
height: 100%;
margin-top: 0px;
padding-top:120px;
text-align:center;
background-attachment: relative;
background-position: center center;

width: 100%;
bottom: 10px;
}

jQuery

var image_array= ['url(/img/portfolio/img2.jpg)', 'url(/img/portfolio/img3.jpg)', 'url("../img/portfolio/img4.jpg")'];
var image_index = 0;

var change_image = function(){

    $('#headerwrap').css("background-image", image_array[image_index]);  
    image_index++;
    if (image_index >= image_array.length){
        image_index = 0;
    }
}

$(document).ready( function(){

    setInterval(change_image, 5000);

});

编辑
将图像URL更改为绝对而不是相对以保持一致性。
以我的经验，这不起作用。
使用一些类样式，并在js中更改类样式

CSS:
#头巾{
保证金：0；
身高：100%；
边际上限：0px；
填充顶部：120px；
文本对齐：居中；
背景依恋：亲属；
背景位置：中心

width: 100%;
bottom: 10px;

}
.background1 {
background-image: url(../img/portfolio/img1.jpg);
}
.background2 {
background-image: url(../img/portfolio/img2.jpg);
}

JS:

享受你的代码。
你说的旋转是什么意思？旋转图像阵列中给出的背景图像当我在css中使用相同的url时得到了验证，但当我在js中使用此url时，其工作方式可能有两个原因。1.
url（'/path..'）
应该是
url（/path）
没有内部引号。2.CSS文件可能有不同的路径结构。好的，我能做的是将所有图像移动到js文件所在的同一文件夹中，然后它将像这样工作
var image\u数组=[url（../img/portfolio/img3.jpg），url（../img/portfolio/img2.jpg），url（../img/portfolio/img4.jpg）]；
NO！！使用这个
var image\u数组=[url]（./img/portfolio/img3.jpg）''url（./img/portfolio/img2.jpg）'，'url（./img/portfolio/img4.jpg）'；
我已经为css文件定义了树文件夹“css”，为js文件定义了“js”，为img文件定义了“img”，所以所有文件夹都处于同一级别是，但您的文件（html文件）不是。所以请尝试
url（'/img/portfolio/img2.jpg'））
用于阵列images@question，您是从服务器上运行页面还是从磁盘上打开html文件？与
img
文件夹相关的html文件在哪里？我直接打开它，当您说“直接打开”时，文件结构类似于project/index.html、css/style.css、js/custom.js、img/portfolio你的意思是通过URL还是通过从web浏览器打开的文件？如果我在css中使用背景图像，那么第一个图像不会呈现css文件中提供的URL需要与css文件本身相关，而不是与运行它的页面相关。我通常使用从域开始的绝对URL，无论在哪里。
/img/portfolio/img1.jpg
。
#headerwrap {
background-image: url(/img/portfolio/img1.jpg);
margin: 0;
height: 100%;
margin-top: 0px;
padding-top:120px;
text-align:center;
background-attachment: relative;
background-position: center center;

width: 100%;
bottom: 10px;
}

var image_array= ['url(/img/portfolio/img2.jpg)', 'url(/img/portfolio/img3.jpg)', 'url("../img/portfolio/img4.jpg")'];
var image_index = 0;

var change_image = function(){

    $('#headerwrap').css("background-image", image_array[image_index]);  
    image_index++;
    if (image_index >= image_array.length){
        image_index = 0;
    }
}

$(document).ready( function(){

    setInterval(change_image, 5000);

});

width: 100%;
bottom: 10px;

}
.background1 {
background-image: url(../img/portfolio/img1.jpg);
}
.background2 {
background-image: url(../img/portfolio/img2.jpg);
}

var class_array= ['background1', 'background2'];
var image_index = 0;

var change_image = function(){
$('#headerwrap').removeClass(class_array.join(' '));
    $('#headerwrap').addClass(image_array[image_index]);  
    image_index++;
    if (image_index >= image_array.length){
        image_index = 0;
    }
}

$(document).ready( function(){

    setInterval(change_image, 5000);

});