背景幻灯片 - jquery

我试图创建一个幻灯片，将在背景中的DIV中运行，同时有链接在它的顶部。我遇到的问题是，当我使用fadeIn和fadeOut JQuery函数转换图片时，它也会淡出链接。有没有办法淡化背景图像？我的代码如下：背景幻灯片 - 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>

来源

2010-10-12 user473669

你应该可以，如果你把文字从图像的单独DIV得到你想要的效果。这样淡出图像div不会淡出文本。
包含文本和图像的div应该与具有绝对位置的两个子div相对定位。文本div应该有一个比image 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的宽度。您可能希望将其设置为图像的实际宽度。

来源

2010-10-12 18:32:30

我试过你的代码，它仍然无法正常工作。。。这些链接仍然与#mainpic DIV一起消失。 – user473669 2010-10-12 19:03:09

对不起，我的代码示例没有为你工作。我仍然认为问题是div如何嵌套，我认为上面的改变会解决它。如果你有Firefox的firebug插件，你可能想玩一下看DIV如何互动。你甚至可以用萤火虫“实时”修改CSS，这样也可以提供帮助。 – 2010-11-15 18:19:00

我可以让它在Firefox和Chrome中运行，但IE将图像向右推。。。

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

来源

2010-10-12 19:21:15 user473669

背景幻灯片 - jquery

回答

相关问题