jquery cycle plug-in pager被覆盖
jquery cycle plug-in pager被覆盖
提问于 2010-02-11 04:02:09
我正在尝试使用jQuery cycle插件和pager选项创建一个自动的图像滑块/旋转木马，以允许导航。
它的目的是从一个图像到下一个图像淡入淡出，并提供一系列部分覆盖图像的分页元素，就像这个示例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
回答 1
Stack Overflow用户
回答已采纳
发布于 2010-02-11 10:08:22
给你的#nav一个100的z指数。
页面在幻灯片图像下方的原因是因为cycle插件会调整每张幻灯片的z索引(以及其他内容)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2239942
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号