hola, me encuentro trasteando (soy nuevo en html/css/js vamos que entiendo lo justo) con el script de jquery cycle.js que básicamente crea una transición en una secuencia de imágenes. Entonces he conseguido meterle una transición sencilla en plan bucle infinito cada "x" segundos sin ninguna otra propiedad, hasta aquí no hay problema.
Siendo más ambicioso he intentado meter un contador de páginas que te redireccionen hacia la página selecionada al pasarle el mouse con a:hover
El problema es que esta ultima configuración del script parece que no se activa y lógicamente las imágenes aparecen una debajo de otra, y el contador de páginas tampoco aparece por lo que entiendo que el error está en la aplicación del script
pero yo no lo encuentro a ver si me podeis ayudar.
*por alguna razón que desconozco el numero de una línea (42) del script en dw se me pone rojo no sé que significa-marcaré donde
*mi versión del script cycle es la posterior a la del ejemplo, aunque probando con el script que viene en el ejemplo tampoco funciona
*en mi primer intento del script (el que funciona) se activaba con clase .slideshow en vez de con id #slideshow como está ahora, no se si esto puede ser una causa y como el archivo es el mismo modificado
copio/pego
codigo del ejemplo http://jquery.malsup.com/cycle/pagerHover.html
Código:
<head>
<style type="text/css">
#nav { margin: 5px; }
#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
speed: 200,
timeout: 3000,
pager: '#nav',
pagerEvent: 'mouseover',
pauseOnPagerHover: true
});
});
</script>
</head>
<body>
<div>
<div id="nav"></div>
<div id="slideshow">
<img src="#1.jpg"/>
<img src="#2.jpg"/>
<img src="#3.jpg"/>
....
</div>
</div>
</body>
mi codigo
Código:
<head>
<style type="text/css">
.oculto{display:none
}
#slideshow { height: 565px;
width: 700px;
margin: 0px }
#slideshow img { padding: 0px;
border:none;
background-color: #FFF; }
#nav { margin: 5px; }
#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background:
#fc0; text-decoration: none }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="script/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
fx: 'fade'
42 speed: 200,
timeout: 3000,
pager: '#nav',
pagerEvent: 'mouseover',
pauseOnPagerHover: true
});
});
</script>
</head>
<body>
<div>
<div id="slideshow">
<img src="#1.jpg"/>
<img src="#2.jpg"/>
<img src="#3.jpg"/>
....
</div>
<div id="nav"></div>
</div>
</body>
muchas gracias