J'essaie de créer un curseur/carrousel d'images automatisé en utilisant le plug-in de cycle jQuery et l'option pager pour permettre la navigation.Le pager du plug-in jquery est recouvert
sa destinée à disparaître d'une image à l'autre, et de fournir une série d'éléments de radiomessagerie qui couvrent en partie sur l'image un peu comme cet exemple here
Pour toutes fins utiles ses fines de fonctionnement, mais peu importe ce que Je fais quand j'essaie de positionner les éléments du pager sur le dessus que les images couvriront sur les boutons.
Je manque actuellement d'hébergement et je le fais tous localement, donc désolé pas d'exemples en direct; mais voici le 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; }
et bien sûr les fichiers js énumérés ci-dessus: jquery-1.3.js & jquery.cycle.all.js
Merci, je n'avais pas pensé à jouer avec l'index z. > _ < Parfois, j'ai juste besoin de l'évidence a souligné à moi. – VikingGoat