Question

我想创建一个网站，背景图片随着时间的推移而变化，淡入/淡出效果，但我不想使用现有的jQuery淡入/淡出效果，因为当一个图像褪色时在其他图像消失之前出现了白色背景。我找到了一个名为Maximage的插件，它适合我的请求，但它使用img标签，而我想使用背景图像CSS（我有充分的理由这样做）。有谁知道怎么做？

这是我的HTML代码：

<div id="wrapper">
//My contain here
</div>

到目前为止，这是我的JavaScript代码：

//Auto change Background Image over time
$(window).load(function() {
   var images = ['img/top/bg-1.jpg','img/top/bg-2.jpg','img/top/bg-3.jpg'];
    var i = 0;

    function changeBackground() {
        $('#wrapper').fadeOut(500, function(){
            $('#wrapper').css('background-image', function () {
            if (i >= images.length) {
                    i = 0;
                }

                return 'url(' + images[i++] + ')';
            });
            $('#wrapper').fadeIn(500);
        })      
    }
    changeBackground();
    setInterval(changeBackground, 3000);
});

示例：http://www.aaronvanderzwan.com/maximage/examples/basic.html

Answer 1

啊，啊！最后！我找到了一个很好的技术！我正在使用双层包装。

代码中的问题有点合乎逻辑。你不能fadeOut和fadeIn 同时一个包装器。

所以我的想法是创建两个包装器并在它们之间来回切换。我们有一个名为“wrapper_top”的包装器，它封装了第二个包装器：“wrapper_bottom”。而神奇的是放在第二个包装器旁边：你的内容。

因此准备好结构如下：

<div id='wrapper_top'>
    <div id='content'>YOUR CONTENT</div>
    <div id='wrapper_bottom'></div>
</div>

然后有点JS + CSS和voilà！任何数量的图像都是动态的！

以下是实施：http://jsbin.com/wisofeqetu/1/

Answer 2

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(window).load(function() {           
  var i =0; 
  var images = ['image2.png','image3.png','image1.png'];
  var image = $('#slideit');
                //Initial Background image setup
  image.css('background-image', 'url(image1.png)');
                //Change image at regular intervals
  setInterval(function(){   
   image.fadeOut(1000, function () {
   image.css('background-image', 'url(' + images [i++] +')');
   image.fadeIn(1000);
   });
   if(i == images.length)
    i = 0;
  }, 5000);            
 });
</script>
</head>
<body>
      <div id="slideit" style="width:700px;height:391px;">  
      </div>
</body>
</html>

Answer 3

如果它不必是背景图像，您可以将所有图像放在#wrapper in <img>中，它就像魅力一样：

<div id="wrapper">
   <img src="firstImage" class="imageClass"></img>
   <img src="secoundImage" class="imageClass"></img>
   <img src="thirdImage" class="imageClass"></img>
</div>

然后是一些风格。每个图像必须位于相同的位置，因此相对于#wrapper添加位置，并将绝对位置设置为.imageClass：

#wrapper{
   position: relative;
}

.imageClass{
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

display：none;将隐藏每一张图片。

现在有些JQuery了。要在窗口加载时显示第一个图像：

$(window).load(function() {
   $('.imageClass').eq(0).show();
});

通过.eq（）“命令”，你可以指定你想要使用哪个类'.imageClass'的元素。从0开始。之后只需执行类似的操作：

 function changeBackground() {
    var current = 0;
    //tells which image is currently shown
    if(current<$('.imageClass').length){
       //loop that will show first image again after it will show the last one
       $('.imageClass').eq(current).fadeOut(500);
       current++;
       $('.imageClass').eq(current).fadeIn(500);
    } else {
       $('.imageClass').eq(current).fadeOut(500);
       current=0;
       $('.imageClass').eq(current).fadeIn(500);
    }
 }
    changeBackground();
    setInterval(changeBackground, 3000);
});

这应该有用，希望你会喜欢它。

Answer 4

您还可以使用jQuery插件backstretch。

淡入/淡出没有白色背景的背景图像

4 个答案: