Fatal编程技术网
  • javascript/
  • Javascript 无白色背景的淡入/淡出背景图像

Javascript 无白色背景的淡入/淡出背景图像

javascript jquery html css

Javascript 无白色背景的淡入/淡出背景图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想创建一个带有背景图像的网站，背景图像随着时间的推移会发生变化，并具有淡入/淡出效果，但我不想使用现有的jQuery淡入/淡出效果，因为当一个图像淡出时，白色背景会在其他图像淡入之前出现。我发现了一个名为的插件，它适合我的要求，但它使用img标签，而我想与背景图像CSS（我有一个很好的理由这样做）。有人知道怎么做吗 以下是我的HTML代码： //我的行李在这里 以下是迄今为止我的JavaScript代码： //随时间自动更改背景图像 $（窗口）。加载（函数（）{ var images=['

我想创建一个带有背景图像的网站，背景图像随着时间的推移会发生变化，并具有淡入/淡出效果，但我不想使用现有的jQuery淡入/淡出效果，因为当一个图像淡出时，白色背景会在其他图像淡入之前出现。我发现了一个名为的插件，它适合我的要求，但它使用img标签，而我想与背景图像CSS（我有一个很好的理由这样做）。有人知道怎么做吗

以下是我的HTML代码：


//我的行李在这里
以下是迄今为止我的JavaScript代码：

//随时间自动更改背景图像
$（窗口）。加载（函数（）{
var images=['img/top/bg-1.jpg'、'img/top/bg-2.jpg'、'img/top/bg-3.jpg']；
var i=0；
函数changeBackground（）{
$（“#包装器”）.fadeOut（500，function（）{
$（'#wrapper'）.css（'background-image'，function（）{
如果（i>=images.length）{
i=0；
}
返回'url（'+images[i++]+'）；
});
$（'包装器'）.fadeIn（500）；
})      
}
changeBackground（）；
设置间隔（changeBackground，3000）；
});
示例：

如果它不一定是背景图像，您可以将所有图像放在#包装中，
在
中，它将像一个符咒一样工作：

显示：无；将隐藏每个图像

现在是JQuery。要在窗口加载时显示第一个图像，请编写以下命令：

#wrapper{
   position: relative;
}

.imageClass{
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
通过.eq（）“命令”，您可以指定要准确使用的类为“.imageClass”的元素。以0开头。在那之后，做些类似的事情：

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

函数changeBackground（）{
无功电流=0；
//指示当前显示的图像

if（currentAHH！终于！我找到了一个很好的技术！我使用了一个双包装器

代码中的问题有点逻辑性。不能同时淡出和淡出一个包装器

因此，我们的想法是创建两个包装器，并在它们之间来回切换。我们有一个名为“wrapper\u top”的包装器，它封装了第二个名为“wrapper\u bottom”的包装器。神奇的是，它放在第二个包装器的旁边：你的内容

因此，结构准备就绪，如下所示：


 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);
});




你的内容


然后是一点JS+CSS和瞧！它将是动态的任何数量的图像

以下是实现：

$（窗口）.load（函数（）{
var i=0；
var images=['image2.png'，'image3.png'，'image1.png']；
var image=$（“#slideit”）；
//初始背景图像设置
css（'background-image'，'url（image1.png）'）；
//定期更改图像
setInterval（函数（）{
图像淡出（1000，函数（）{
css（'background-image'，'url（'+images[i++]+'））；
fadeIn（1000）；
});
if（i==images.length）
i=0；
}, 5000);            
});

你也可以使用jQuery插件。
你能提供一个工作的JSFIDLE吗？你只是在问如何交叉淡入两个元素，而不是淡出同一个元素，改变背景，然后淡入？谢谢你，但我必须使用背景图像而不是图像标签，因为在包装器中，我使用了其他只能完美运行的插件另一方面，jquery的fadeIn和fadeOut函数不适合我导师的要求。他想要这样的东西：（fadeOut后没有白色闪烁）减1，因为你不尊重要求：（我也打算使用这个解决方案，但是使用css属性背景图像有点复杂。但是你的代码很好。很遗憾这样一个好的答案加了-1…很遗憾，它离题了：（对不起，我没有给你加-1，那是另一个人。）

 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);
});



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



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