jquery cycle plug-in pager being covered over
I'm trying to create an automated image slider/carousel using the jQuery cycle plug-in and the pager option to allow for navigation.
Its meant to fade from one image to the next, and provide a series of pager elements that partially cover over the image much like this example here
For all intents and purposes its functioning fine, but no matter what I do when I try to position the pager elements on top the images will cover over the buttons.
I'm currently lacking hosting and I'm doing this all locally, so sorry no live examples; but here's the code.
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; }
and of course the above listed js files: jquery-1.3.js & jquery.cycle.all.js
Give your #nav a z-index of 100.
The reason your pager is below the slideshow images is because the cycle plugin adjusts the z-index (among other things) of each slide.
加载中,请稍侯......
精彩评论