Question

我正在尝试创建一个幻灯片，该幻灯片将在后台运行DIV，同时在其上方有链接。我遇到的问题是，当我使用fadeIn和fadeOut JQuery函数转换图片时，它也会淡化链接。有没有办法淡化背景图像？我的代码如下：

<html>
<head>
<script type="text/javascript" src="jquery.js">
var bgimage=new Array()
  bgimage[0] = 'bg_pic2.jpg';
  bgimage[1] = 'bg_pic3.jpg';
  bgimage[2] = 'bg_pic4.jpg';
  bgimage[3] = 'cbg_pic5.jpg';
  bgimage[4] = 'bg_pic1.jpg';  

  var abc=-1

  function t()
  {
    if (abc<bgimage.length-1)
 {
   abc++;
 }
 else
 {
   abc=0;
 } 
    document.getElementById("mainpic").style.backgroundImage = 'url("'+bgimage[abc]+'")';
 $('#mainpic').fadeIn();
 $('#mainpic').delay(3900).fadeOut();

  }  
          window.onload = load;

  function load()
  {
 $('#mainpic').hide();  
    $('#mainpic').delay(500).fadeIn();
  document.getElementById("mainpic").style.backgroundImage =     'url(css/images/bg_pic1.jpg)';
    setInterval("t()",5000); //change every 4 seconds, can be changed.
 $('#mainpic').delay(3600).fadeOut();
  }


//-->
</script>
</head>

<body>
    <div id="container" >
     <div id="mainpic" class="mainpic">  
      <div style="float:right; height: 531px; width: 20px"></div>
        <br />        
        <div class="coaches"><a href=""></a></div>
        <br />
        <br />
        <br />
        <br />      
        <div class="hours"><a href=""></a></div>
        <br />
        <br />
        <br />
        <br />      
        <div class="pics"><a href=""></a></div>
        <br />
        <br />
        <br />
        <br />              
        <div class="blog"><a href=""></a></div>
      </div>          
    </div> 
</body>

Answer 1

如果将文本放在图像中的单独DIV中，您应该能够获得所需的效果。这样淡出图像div就不会淡出文字包含文本和图像的div应该与具有绝对定位的两个子div具有相对定位。文本div应具有比图像div更高的z-index，以确保文本在图像“上方”。

尝试类似：

<body> 
    <div id="container" > 
     <div id="mainpic" class="mainpic" style="position:relative;">   
      <div style="position: absolute; top: 0px; left: 0px; height: 531px; width: 400px"></div> 
      <div id="text" style="position: absolute; top: 0px; left: z-index=1">
        <br />         
        <div class="coaches"><a href=""></a></div> 
        <br /> 
        <br /> 
        <br /> 
        <br />       
        <div class="hours"><a href=""></a></div> 
        <br /> 
        <br /> 
        <br /> 
        <br />       
        <div class="pics"><a href=""></a></div> 
        <br /> 
        <br /> 
        <br /> 
        <br />               
          <div class="blog"><a href=""></a></div> 
        </div>
      </div>           
    </div>  
</body>

请注意，我调整了图像div的宽度。您可能希望将其设置为图像的实际宽度。

Answer 2

我能够在Firefox和Chrome中使用它，但IE将图像WAY推向右侧。。。

<div style="width:755px; height:507px; border: #888 5px solid;">
  <div id="container" > 
   <div id="mainpic" class="mainpic" style="position: absolute"> 
   </div>        
     <div id="links" style="position: relative">
       <div style="float:right; height: 531px; width: 20px"></div>
       <br />
        <div class="coaches"><a href=""></a></div> 
        <br /> 
        <br /> 
        <br /> 
        <br />       
        <div class="hours"><a href=""></a></div> 
        <br /> 
        <br /> 
        <br /> 
        <br />       
        <div class="pics"><a href=""></a></div> 
        <br /> 
        <br /> 
        <br /> 
        <br />               
        <div class="blog"><a href=""></a></div> 
     </div>     
  </div>         
</div>

背景幻灯片 - Jquery

2 个答案: