logo标签列表

淡入/淡出背景图像，无白色背景

javascriptjqueryhtmlcss
6
我希望创建一个网站，其中的背景图片会随着时间变化而产生淡入淡出效果，但我不想使用现有的jQuery淡入淡出效果，因为当一张图片淡出时，在其他图片淡入之前会出现白色背景。我找到了一个名为Maximage的插件，它符合我的要求，但它使用img标签，而我想使用background-image 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
这是一个网站链接示例。
1
请问您能提供一个可用的JSFiddle吗？ - Tim McClure
1
你只是在询问如何淡入淡出两个元素，而不是将同一元素淡出，更改背景，然后再淡入吗？ - adeneo
4个回答
6

啊！终于找到了一个好技巧！我使用了双重包装。

你代码中的问题有点逻辑上的。 你不能同时淡出和淡入单个包装器。

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

因此，具有以下结构：

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

然后加上一点JS+CSS，就完成了！它可以带有任意数量的图像，具有动态效果！！！
这是实现方法：http://jsbin.com/wisofeqetu/1/
1
<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>
0

如果不一定要使用背景图片，你可以将所有的图片放在 #wrapper 中，用 <img> 标签来实现，效果会非常好：

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

然后一些样式。每个图像都必须在相同的位置，所以将相对于#wrapper添加position:relative，并将position:absolute添加到.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);
});

应该可以，希望你会喜欢。

谢谢你的建议，但我必须使用背景图片而不是图像标签，因为在包装器中，我使用了其他插件，只有使用包装器背景图片才能完美运行。另一方面，jQuery的fadeIn和fadeOut函数不符合我的导师要求的要求。他想要像这样的效果：http://www.aaronvanderzwan.com/maximage/examples/basic.html（淡出后没有白色闪烁） - Lee
减1分是因为您没有遵守要求:(我也想用这个解决方案，但使用CSS属性background-image有点复杂。但您的代码很好。很遗憾要给一个好答案打负分...可悲的是它与主题无关:( - Yves Lange
抱歉，我没有对你放置-1，那是别人。 - Lee
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接