Jquery 淡入淡出'；背景图像'；

如何更改背景图像，使图像可以连续（循环）淡入和淡出。我尝试创建一个div并在其中添加几个图像，但这似乎不起作用，因为我需要图像具有背景大小：封面和居中位置。我知道以前也有人问过类似的问题，但我似乎无法让它起作用

#landing {
  position: relative;
  margin-top: 0px;
  background-image:url('/images/blue.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-color: black;

}

---

谢谢

将

高度

、

宽度

和

z索引

添加到CSS中：

#landing {
    position: relative;
    margin-top: 0px;
    background:url('https://www.google.com/images/srpr/logo11w.png') no-repeat;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    height:100px;
    width:100px;
    background-color: black;
    z-Index:-1;
}

使用

setTimeout（）

淡入淡出

function FadeOut(){
    $('#landing').fadeOut();
}

function FadeIn(){
     $('#landing').fadeIn();
}

setTimeout(function(){FadeOut();}, 1000);
setTimeout(function(){FadeIn();}, 1000);

您可以在forloop中添加

setTimeout

函数，使背景淡入淡出更长时间

---

您还需要一个循环或一组图像；如果你想改变淡出时的图像；大概是这样的：

---

我想看看这个会对你有帮助；这很简单。

基本上，过渡不适用于背景图像，因此您需要做额外的工作。有很多jQuery插件可以播放幻灯片。它们都采用相同的方法，使用两个图像元素并淡出一个元素来实现效果

实际上，您可以使用纯CSS来实现这一点，并且根据浏览器要求，不需要额外的元素。不过，这只适用于两个图像

#landing {
    position: relative;
    border: 1px solid #666;
    height: 10em;
}

#landing::before, #landing::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-size: contain;
}

#landing::before {
    background: #fff url(http://www.openclipart.org/people/Map2Map/Waveski_Rear.svg) no-repeat center;
}

#landing::after {
    background: #fff url(http://www.openclipart.org/people/Map2Map/Waveski_Along_Wave.svg) no-repeat center;
    animation: fadeWithDelay 2s infinite linear alternate;
} 

@keyframes fadeWithDelay {
    0% {opacity: 1;}
    25% {opacity: 1;}
    75% {opacity: 0;}
    100% {opacity: 0;}   
}

另外，如果您需要多个图像，而不需要是动态的，这里还有另一种方法

---

您可以很容易地使用下面的方法（）实现这一点

HTML:

Javascript

var kittens = ["http://placekitten.com/200/300", "http://placekitten.com/400/301", "http://placekitten.com/200/305", "http://placekitten.com/200/308"]

var currentKitten = 1;
var lastKitten = 0;

var changeUpTheKitten = function() {
    lastKitten = currentKitten;
    currentKitten = (++currentKitten < kittens.length) ? currentKitten : 0;
    // we need to cache the image so it loads in smoothly as a bg on the real #landing div
    $("#dummyDiv").css("background-image", "url("+kittens[currentKitten]+")");
    $("#cover").removeClass("hide");
    $("#landing").css("background-image", "url("+kittens[lastKitten]+")");
    //  url("+kittens[lastKitten]+")"
    setTimeout(function() { $("#cover").addClass("hide"); }, 700);
};

var kittenChangeInterval = setInterval(changeUpTheKitten, 3000);

var kittens=[”http://placekitten.com/200/300", "http://placekitten.com/400/301", "http://placekitten.com/200/305", "http://placekitten.com/200/308"]
var currentKitten=1；
var lastKitten=0；
var changeUpTheKitten=函数（）{
lastKitten=当前小猫；
currentKitten=（++currentKitten

---

您可以随意使用数字。只需调整几个值，就可以让数字看起来大不相同。如有任何问题，请随时提问。

对于fadeIn和FadeOut效果，您只需遵循以下步骤即可：

1.制作一个div并在其中放置一个100%宽度和高度的图像src标记，使其像背景一样工作

---

如果他不想要交叉淡入的话
#dummyDiv {
    position: inline;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
}
#landing {
  position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  margin-top: 0px;
  background-image:url('http://placekitten.com/200/300');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-color: black;
  transition: background-image .5s;
  z-index: -3;

}
#cover {
    background: white;
    opacity: .8;
    transition: opacity .7s;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
}
#cover.hide {
    opacity: 0;
}

var kittens = ["http://placekitten.com/200/300", "http://placekitten.com/400/301", "http://placekitten.com/200/305", "http://placekitten.com/200/308"]

var currentKitten = 1;
var lastKitten = 0;

var changeUpTheKitten = function() {
    lastKitten = currentKitten;
    currentKitten = (++currentKitten < kittens.length) ? currentKitten : 0;
    // we need to cache the image so it loads in smoothly as a bg on the real #landing div
    $("#dummyDiv").css("background-image", "url("+kittens[currentKitten]+")");
    $("#cover").removeClass("hide");
    $("#landing").css("background-image", "url("+kittens[lastKitten]+")");
    //  url("+kittens[lastKitten]+")"
    setTimeout(function() { $("#cover").addClass("hide"); }, 700);
};

var kittenChangeInterval = setInterval(changeUpTheKitten, 3000);

$(document).ready(function){
        setInterval(function(){
            $("#myimage").fadeOut(1000);
            setTimeout(function(){
                $("#myimage").fadeIn(1000);
                if(index==5) index=0;
                index++;
                $("#myimage").attr("src",changeimages[index]);  
                /*alert(changeimages[index]);*/ 
            },1000);
        },3000);
  });