滑动/褪色背景图像答案

【问题标题】：Sliding/fading background-image滑动/褪色背景图像
【发布时间】：2016-04-21 21:25:46
【问题描述】：

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

我在这里使用了这篇文章的答案：CSS background-image slideshow 并产生了以下内容：

<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;">

查看源代码时图像路径是正确的，但不幸的是什么都没有发生并且图像没有加载。

我做错了什么？

提前致谢。

【问题讨论】：

it works
恐怕不适合我，它没有对 hometopcontentarea div 应用任何类型的背景属性
好的，我只需将 $ 更改为 jQuery 就可以完成这项工作，但 .fadeIn("slow",function(){ 似乎被忽略了，无论我输入 slow 还是数字 500 或 3000 例如
查看我第一条评论中的链接，代码有效。必须有其他东西你错过了。加载 jquery 可能是一回事..
是的，谢谢，它现在可以正常工作了，并且 setTimeout 持续时间在更改后也可以正常工作，但是淡入持续时间被忽略了。

标签： javascript jquery

【解决方案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();

(demo)

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

【讨论】：

太好了，谢谢...我不认为有办法在第二张图像淡入时将第一张图像淡出回0？只是为了让它更无缝一点？
您可以堆叠 2 个元素并在顶部显示当前图像，在其后面显示上一个/下一个图像，这样过渡会更平滑，不会出现白屏。或者您可以将不透明度从 0 增加到 0.5，这也会使它看起来更好。