jquery cycle plug-in pager being covered over_问答_开发者

jquery cycle plug-in pager being covered over

开发者 https://www.devze.com 2022-12-19 16:04 出处：网络

I\'m trying to create an automated image slider/carousel using the jQuery cycle plug-in and the pager option to allow for navigation.

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.