Javascript 简单jquery.css延迟更改背景图像

我想在welcome_box div中使用jquery及时更改背景

<div class="welcome_box">
        <p>test</p>
        <small>text</small>
    </div>
</div>

我不需要点击或任何东西，只需要对大约4幅图像进行自动fadeIn，每幅图像的fadeIn延迟5秒

我找不到简单的代码，有人能帮我吗

提前谢谢。

像这样试试

var i=0;
setInterval(function(){

 $('.welcome_box').css("background-image","url('images/pic"+i+".jpg')");
 $('.welcome_box').fadeToggle();
 i++;
 if(i==4)
 {
    i=0;
}
},5000);

---

保留图像名称，如pic1、pic2..等

您的标记无效。试试这个

<div class="welcome_box">
    <div>
        <p>test</p>
        <small>text</small>
    </div>
</div>

---

另一种方法是使用javascript，有很多选项，但最简单的方法是使用现有的carousel插件。这是我发现的第一个具有自动淡入淡出功能的，你在谈论哪些图像？除非你淡入整个div，否则你不能淡入背景图像。你需要一个图像或元素来显示div内的图像。我希望div的库底每5秒更改一次，我需要简单的代码。我希望你们能知道一些有用的东西，这是标题中提到背景的一部分。正如Archer所说，你不能将效果应用于图像背景，你应该重新思考你的逻辑，然后代码不起作用，试图找出i值在这里是如何迭代的？@user331356这就是你要寻找的吗？它起作用了！但是有了一个fadeIn和out，它将是完美的@AnoopJoshi我们如何用动画切换它？不管怎样，谢谢你！如果使用旋转木马示例，则需要使用position:absolute设置文本样式；z指数：1或更大，因此它位于图像上方的一层上。如果使用CSS方法，背景图像位于文本下方的一层上。

.welcome_box div
{
animation: myfirst 20s;
-webkit-animation: myfirst 20s; /* Safari and Chrome */
}

@keyframes myfirst
{
0%   {background: url(image_1) 0 0 no-repeat; opacity:1;}
9%  {background: url(image_1) 0 0 no-repeat; opacity:0;}
18%  {background: url(image_2) 0 0 no-repeat; opacity:0;}
36%  {background: url(image_2) 0 0 no-repeat; opacity:1;}
45%  {background: url(image_2) 0 0 no-repeat; opacity:0;}
54% {background: url(image_3) 0 0 no-repeat; opacity:0;}
63% {background: url(image_3) 0 0 no-repeat; opacity:1;}
72%  {background: url(image_3) 0 0 no-repeat; opacity:0;}
81%  {background: url(image_4) 0 0 no-repeat; opacity:0;}
90% {background: url(image_4) 0 0 no-repeat; opacity:1;}
99% {background: url(image_4) 0 0 no-repeat; opacity:0;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: url(image_1) 0 0 no-repeat; opacity:1;}
9%  {background: url(image_1) 0 0 no-repeat; opacity:0;}
18%  {background: url(image_2) 0 0 no-repeat; opacity:0;}
36%  {background: url(image_2) 0 0 no-repeat; opacity:1;}
45%  {background: url(image_2) 0 0 no-repeat; opacity:0;}
54% {background: url(image_3) 0 0 no-repeat; opacity:0;}
63% {background: url(image_3) 0 0 no-repeat; opacity:1;}
72%  {background: url(image_3) 0 0 no-repeat; opacity:0;}
81%  {background: url(image_4) 0 0 no-repeat; opacity:0;}
90% {background: url(image_4) 0 0 no-repeat; opacity:1;}
99% {background: url(image_4) 0 0 no-repeat; opacity:0;}
}