背景幻燈片 - 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

回答

相關問題