Javascript 使用jQuery addClass更改背景图像

是否可以使用jQuery

addClass

更改css背景？我正在使用下面的代码，但它只是停留在初始背景图像上

HTML

CSS

---

您需要编写适当的CSS规则。现在，它们的优先级不允许您看到更改。这样写

#background {
    background-image: url("backgroundimage1.JPG");
}

#background.background1 {
    background-image: url(backgroundimage1.JPG);
}

#background.background2 {
    background-image: url(backgroundimage2.JPG);
}

#background.background3 {
    height: 20%;
    background-image: url(backgroundimage3.JPG);
}

---

这里有两个问题。首先，添加类并立即删除它们，因为

delay

对

css（）

方法没有影响。要达到您的要求，您可以使用

setInterval

。其次，您需要增加

backgroundX

类的特殊性，以便它们覆盖

#background

元素上的默认样式。试试这个：

var count = 0;
var classes = [ 'background1', 'background2', 'background3' ];

function updateBackground() {
    $('#background').removeClass(classes.join(' ')).addClass(classes[count % classes.length]);
    count++;
}

setInterval(updateBackground, 2000);

#background.background1{
背景图片：url（backgroundimage1.JPG）；
}
#背景.背景2{
背景图片：url（backgroundimage2.JPG）；
}
#背景.背景3{
身高：20%；
背景图片：url（backgroundimage3.JPG）；
}

---

请注意，该示例使用的是背景色，但原理是相同的。

正如其他人所说，这是因为ID总是有一个

---

虽然您可以按照其他答案的建议来做（#background.background1等等），但我建议只在jQuery目标中使用ID，避免在CSS文件中使用ID，因为它与使用类相比没有任何优势，并且有许多缺点（无可重用性、特殊性问题…）。请参见

，因为您在添加类后立即将其删除，因此不会看到效果；在这种情况下，浏览器在绝对必要之前不会重新绘制屏幕。如果你想随着时间的推移在背景中循环，你可能应该研究

setInterval（）

或

setTimeout（）

。^。创建一个额外的

.background

类，而不是使用

#background

设置图像。这样，您就不需要连接选择器，只需要使用单个类来重写。

#background {
    width: 100%;
    height: 100%;
    font-size: 1.5em;
    background-image: url(backgroundimage1.JPG);
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

.background1 {
    background-image: url(backgroundimage1.JPG);
}

.background2 {
    background-image: url(backgroundimage2.JPG);
}

.background3 {
    background-image: url(backgroundimage3.JPG);
}

#background {
    background-image: url("backgroundimage1.JPG");
}

#background.background1 {
    background-image: url(backgroundimage1.JPG);
}

#background.background2 {
    background-image: url(backgroundimage2.JPG);
}

#background.background3 {
    height: 20%;
    background-image: url(backgroundimage3.JPG);
}

var count = 0;
var classes = [ 'background1', 'background2', 'background3' ];

function updateBackground() {
    $('#background').removeClass(classes.join(' ')).addClass(classes[count % classes.length]);
    count++;
}

setInterval(updateBackground, 2000);