滑动/淡入淡出背景图像

Question

我在网站所有页面上的容器上都有一个背景图像，但主页有两个图像，他们希望这些图像滚动/淡入淡出。

我在这里使用了这篇文章中的答案：CSS背景图像幻灯片并产生了以下内容：

<script>
var images=new Array('imageurl1','imageurl2');
var nextimage=0;
doSlideshow();
function doSlideshow(){
    if(nextimage>=images.length){nextimage=0;}
    $('.hometopcontentarea')
    .css('background','url("'+images[nextimage++]+'") no-repeat center')
    .fadeIn(500,function(){
        setTimeout(doSlideshow,1000);
    });
}
</script>
        <div class="hometopcontentarea col-xs-12 col-sm-12" style="height: 624px; margin-bottom: 20px;">

查看源时，图像路径是正确的，但不幸的是，没有任何反应，图像也没有加载。

我可能做错了什么？

提前谢谢。

Answer 1

我想你正在寻找这个：

var images = [
      "http://www.independent.ie/incoming/article29989530.ece/ALTERNATES/h342/Li%20Ann%20Smal%20-App.jpg",
      "http://im.rediff.com/news/2015/dec/24tpoty20.jpg"
    ]
    var nextimage = 0;
    function doSlideshow(){
        if(nextimage>=images.length){nextimage=0;}
        $('.hometopcontentarea')
        .css({
          background: 'url('+ images[nextimage++]+') no-repeat center',
          opacity:0,
        })
        .fadeTo('slow',1);
      setTimeout(doSlideshow,4000);
    }
    doSlideshow();

（演示）

fadeIn函数的问题在于你不能淡入 1 个元素 2 次。 一旦它已经可见，您需要重置不透明度以允许第二次淡入。