Javascript 使用js更改背景图像

我正在尝试使用

fadeIn

、

fadeOut

、

addClass

和

removeClass

编写脚本，每3秒更改一次背景图像。 使用

setInterval

有更好的方法吗

$("document").ready(function () {

 $("#bg").delay(3000);
 $("#bg").fadeOut(300);
 $("#bg").removeClass('bg1');
 $("#bg").addClass('bg2');
 $("#bg").fadeIn(300);

 $("#bg").delay(3000);
 $("#bg").fadeOut(300);
 $("#bg").removeClass('bg2');
 $("#bg").addClass('bg1');
 $("#bg").fadeIn(300);


});

顺便说一句，它不能正常工作

HTML:

编辑 刚刚注意到OP想要淡出，所以我在类和

#bg

中都添加了一个简单的CSS属性

使用。不确定为什么要使用

display:none

，因此我将其删除。我还向

html

和

body

添加了维度，因此您的

div

与它的百分比长度有关

演示

setInterval（函数（）{
$（'#bg'）.toggleClass（'bg1-bg2'）；
}, 3000);
html，
身体{
身高：100%；
宽度：100%
}
#背景{
位置：绝对位置；
宽度：100%；
身高：70%；
背景尺寸：封面；
背景位置：中心；
不透明度：1；
过渡：所有1；
}
.bg1{
背景图像：url（“http://placehold.it/500x250/00f/eee?text=BG1");
不透明度：1；
过渡：所有1；
}
.bg2{
背景图像：url（“http://placehold.it/500x250/f00/fff?text=BG2");
不透明度：1；
过渡：所有1；
}

编辑
刚刚注意到OP想要淡出，所以我在类和
#bg
中都添加了一个简单的CSS属性

使用。不确定为什么要使用
display:none
，因此我将其删除。我还向
html
和
body
添加了维度，因此您的
div
与它的百分比长度有关

演示

setInterval（函数（）{
$（'#bg'）.toggleClass（'bg1-bg2'）；
}, 3000);
html，
身体{
身高：100%；
宽度：100%
}
#背景{
位置：绝对位置；
宽度：100%；
身高：70%；
背景尺寸：封面；
背景位置：中心；
不透明度：1；
过渡：所有1；
}
.bg1{
背景图像：url（“http://placehold.it/500x250/00f/eee?text=BG1");
不透明度：1；
过渡：所有1；
}
.bg2{
背景图像：url（“http://placehold.it/500x250/f00/fff?text=BG2");
不透明度：1；
过渡：所有1；
}
您的方法应该可以很好地工作，但这不是编写它的最佳方式：如果您的图形设计师突然决定在循环中添加另一个背景图像，该怎么办？你的代码可能会变得很长很快。我会这样做：


var backgroundClasses=['bg1'，'bg2']；//将css中定义的所有后台类存储在一个数组中
变量$element=$（'.container'）；//缓存我们要使用的元素
变量计数器=0；//此变量将不断增加以改变类
setInterval（函数（）{//一个区间
计数器+++；//增加计数器
$element.fadeOut（500，function（）{//淡出元素
$element.removeClass（backgroundClasses.join（“”））。//删除数组中定义的所有类
addClass（backgroundClasses[计数器%backgroundClasses.length]）。//从类数组中添加一个类
fadeIn（500）；//显示元素
});
}，3000）
.container{
宽度：100vw；
高度：100vh；
}
.bg1{
背景色：红色；
}
.bg2{
背景颜色：绿色；
}
您的方法应该可以很好地工作，但这不是编写它的最佳方式：如果您的图形设计师突然决定在循环中添加另一个背景图像，该怎么办？你的代码可能会变得很长很快。我会这样做：


var backgroundClasses=['bg1'，'bg2']；//将css中定义的所有后台类存储在一个数组中
变量$element=$（'.container'）；//缓存我们要使用的元素
变量计数器=0；//此变量将不断增加以改变类
setInterval（函数（）{//一个区间
计数器+++；//增加计数器
$element.fadeOut（500，function（）{//淡出元素
$element.removeClass（backgroundClasses.join（“”））。//删除数组中定义的所有类
addClass（backgroundClasses[计数器%backgroundClasses.length]）。//从类数组中添加一个类
fadeIn（500）；//显示元素
});
}，3000）
.container{
宽度：100vw；
高度：100vh；
}
.bg1{
背景色：红色；
}
.bg2{
背景颜色：绿色；
}
使用
淡出（）方法（请参阅）的回调在动画完成时执行类更改。否则，该类将在动画仍在运行时交换

如果要自动连续地执行此操作，没有比使用setInterval（）更好的方法了

下面是一个工作示例：


$（“文档”）.ready（函数（）{
var bg=$（“#bg”）；
setInterval（函数（）{
//我们淡出（）图像，动画完成后，我们立即更改类和淡出（）。
背景淡出（300，函数（）{
bg.toggleClass（'bg1-bg2'）；
bg.fadeIn（300）；
});
}, 1500);
});
#bg{
位置：绝对位置；
宽度：100%；
身高：70%；
背景尺寸：封面；
背景位置：中心；
}
.bg1{
背景图像：url（“https://www.w3schools.com/css/img_fjords.jpg");
}
.bg2{
背景图像：url（“https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg");
}
使用
淡出（）方法（请参阅）的回调在动画完成时执行类更改。否则，该类将在动画仍在运行时交换

如果要自动连续地执行此操作，没有比使用setInterval（）更好的方法了

下面是一个工作示例：


$（“文档”）.ready（函数（）{
var bg=$（“#bg”）；
setInterval（函数（）{
//我们淡出（）图像，动画完成后，我们立即更改类和淡出（）。
背景淡出（300，函数（）{
bg.toggleClass（'bg1-bg2'）；
bg.fadeIn（300）；
});
}, 1500);
});
#bg{
位置：绝对位置；
宽度：100%；
身高：70%；
背景尺寸：封面；
背景位置：中心；
}
.bg1{
背景图像：url（“
<div id="bg" class="ShowBG bg1"></div>

#bg{
position:absolute;
width:100%;
height:70%;
background-size:cover;
background-position:center;
display:none;
}
.bg1{background-image:url("/img/index/bg1.png");}
.bg2{background-image:url("/img/index/bg2.png");}