Javascript 如何更改淡入淡出的背景图像_Javascript_Jquery

Javascript 如何更改淡入淡出的背景图像

javascript jquery

Javascript 如何更改淡入淡出的背景图像,javascript,jquery,Javascript,Jquery,我有下面的代码，我想用淡入淡出的方式更改图像，现在图像被“changeBg”函数替换，但它们只是被替换而没有淡入淡出如何在更改图像的功能和负责淡入淡出的功能之间进行“合并” 谢谢 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7"> &

我有下面的代码，我想用淡入淡出的方式更改图像，现在图像被“changeBg”函数替换，但它们只是被替换而没有淡入淡出

如何在更改图像的功能和负责淡入淡出的功能之间进行“合并”

谢谢

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7"> 
<title>none</title>
<link rel="stylesheet" type="text/css" href="Css/design.css" >
 <script src="query-1.4.4.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function() 
{
    $(document).ready(function() ({$('').fadeIn(1000);  
});
</script>
<script language="JavaScript">
function changeBg (color) {
  document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-repeat";}
</script>
</head>
<body>
<div id="wrapper" class="wrapper">
     <div class="logo"><a href="http://mazonit.co.il/"><img border="0" src="Images/logo.png" ></a>
     </div>
        <div class="menu">
            <a href="#" id="arrowleft"><img border="0" src="Images/arrowleft.png" ></a>
            <img border="0" src="Images/black.png" onclick="changeBg(this.name);" name="black">
            <img border="0" src="Images/blue.png" onclick="changeBg(this.name);" name="blue">
            <img border="0" src="Images/fuksia.png" onclick="changeBg(this.name);" name="fuksia">
            <img border="0" src="Images/brown.png" onclick="changeBg(this.name);" name="brown">
            <img border="0" src="Images/orange.png" onclick="changeBg(this.name);" name="orange">
            <img border="0" src="Images/red.png" onclick="changeBg(this.name);" name="red">
            <img border="0" src="Images/grey.png" onclick="changeBg(this.name);" name="grey">
            <img border="0" src="Images/white.png" onclick="changeBg(this.name);" name="white">
            <a href="#" id="arrowright"><img border="0" src="Images/arrowright.png" ></a>
</div>
</body>
</html>


没有一个
$（文档）.ready（函数（）
{
$（document）.ready（function（）（{$（''）.fadeIn（1000）；
});
功能更改BG（颜色）{
document.getElementById（“wrapper”）.style.background=“url（Images/“+color+”.jpg）不重复”；}

谢谢！

如果我理解正确，您可以淡出背景，更改背景，然后再次淡入？如下所示：

function changeBg (color) {
   $('#wrapper').fadeOut(1000,function(){
      $(this).css('background','url(Images/'+color+'.jpg) no-repeat').fadeIn(1000);
});
}

交叉淡入（淡出淡入时淡出）是在jQuery中实现的，方法是将语句对齐，而不是在previos动画的函数中

另外，我知道您只希望背景图像淡出并淡出，而不是页面的实际内容

要实现这一点，请将背景图像作为一个单独的项目，但要放在背景的主div中：

<div id='wrapper' style='position:relative' > <!-- must be relative -->

 <img id='bg1' src='initial.image' style='position:absolute; top:0; left:0; 
  width:100%; height:100%; opacity:0.2; display:none; ' />

 <img id='bg2' src='initial.imageTWO' style='position:absolute; top:0; left:0; 
  width:100%; height:100%; opacity:0.2; display:none; ' />

</div>

function changeBackground(which) {
    $('#bg'+which).attr('src','current-image.xxx').fadeOut('slow');    
    which = (which = 1) ? 2 : 1;
    $('#bg'+which).attr('src','next-image.xxx').fadeIn('slow');
    setTimeout('changeBackground('+which+')',2000);
}    

$(document).ready( function () {
    $('#bg1').attr('src','image-name.xxx').fadeIn('slow');
    setTimeout('changeBackground(1)',2000); //every 2 seconds?
    . ......
});

In case you have various images for the "slide show", you might want to add a random
number generation for which picture to show next.


函数changeBackground（哪个）{
$（'#bg'+which）.attr（'src'，'current-image.xxx'）.fadeOut（'slow'）；
哪个=（哪个=1）？2:1；
$（'#bg'+which）.attr（'src'，'next-image.xxx'）.fadeIn（'slow'）；
setTimeout（'changeBackground（'+which+'），2000）；
}    
$（文档）.ready（函数（）{
$（'#bg1'）.attr（'src'，'image-name.xxx'）.fadeIn（'slow'）；
setTimeout（'changeBackground（1）'2000）；//每2秒一次？
. ......
});
如果“幻灯片放映”中有各种图像，则可能需要添加随机图像
生成下一张图片的编号。