Question

我正在尝试使用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＆amp; jquery.cycle.all.js

Answer 1

将 #nav 的z-index设为100.

您的寻呼机低于幻灯片放映图像的原因是因为循环插件会调整每张幻灯片的z-index（以及其他内容）。

jquery循环插件寻呼机被覆盖

1 个答案: