jquery循環插件尋呼機被覆蓋

我想創建一個自動圖像滑塊/輪播使用jQuery循環插件和傳呼機選項，以允許導航。jquery循環插件尋呼機被覆蓋

它的意思褪色從一個圖像到下一個，並提供了一系列的尋呼機的元素是在圖像部分覆蓋就像這個例子here

對於所有意圖和目的，它的運作正常，但不管是什麼當我嘗試將尋呼機元件放置在頂部時，我會這樣做，圖像將覆蓋按鈕。

我目前缺乏託管，我在本地做這些，所以抱歉沒有現場示例;但是這裏是代碼。

HTML：

<head> 
<title></title> 
<link rel="stylesheet" type="text/css" media="screen" href="jquery.css" /> 
<script type="text/javascript" src="js/jquery-1.3.js"></script> 
<script type="text/javascript" src="js/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('#myslides') 
    .before('<div id="nav">') 
    .cycle({ 
    fx: 'fade', 
    speed: 500, 
    timeout: 3000, 
    pager: '#nav' 
}); 
}); 



</script> 

</head> 
<body> 
<div id="content-area"> 
<div id="myslides"> 
<img src="pic1.jpg" /> 
<img src="pic2.jpg" /> 
<img src="pic3.jpg" /> 
<img src="pic4.jpg" /> 
<img src="pic5.jpg" /> 
</div> 
</div> 
</body> 
</html>

CSS：

#myslides { 
width: 586px; 
height: 311px; 
padding: 0; 
margin: 0 auto;} 
#myslides img { 
padding: 10px; 
border: 1px solid rgb(100,100,100); 
background-color: rgb(230,230,230); 
width: 586px; 
height: 311px; 
top: 0; 
left: 0;} 
#nav { 
float: right; 
position: absolute; 
top: 200px; 
float: right;} 
.nav { margin: 5px 0; } 
#nav a { 
margin: 0 5px; 
padding: 3px 5px; 
border: 1px solid #ccc; 
background: #fc0; 
text-decoration: none } 
#nav a.activeSlide { background: #ea0} 
#nav a:focus { outline: none; }

，當然還有上面列出的js文件：jQuery的1.3.js & jquery.cycle.all.js

來源

2010-02-10 VikingGoat

給你#nav z-index爲100.

您的傳呼機在幻燈片圖像下方的原因是因爲循環插件會調整每張幻燈片的z-index（以及其他內容）。

來源

2010-02-11 02:08:22 nickelleon

謝謝，我沒有想過玩Z指數。 > _ < 有時候我只需要明顯的指出我。 – VikingGoat 2010-02-11 15:23:24

jquery循環插件尋呼機被覆蓋

回答

相關問題