Pregunta

Hice presentación de diapositivas con jQuery Cycle, pero tengo un problema con los temporizadores. Después de los ciclos de par que están arruinando. ¿Cómo puedo combinar dos animaciones de ciclo en una función y con un temporizador?

Gracias por cualquier ayuda.

xHTML:

<div id="slideshow">
  <ul>
    <li>
      <div class="image"><img src="test.jpg" /></div>
      <div class="description">Some text goes here</div>
    </li>
    <li>
      <div class="image"><img src="test.jpg" /></div>
      <div class="description">Some text goes here</div>
    </li>
    <li>
      <div class="image"><img src="test.jpg" /></div>
      <div class="description">Some text goes here</div>
    </li>
  </ul>
</div>

jQuery:

var img = $(this).find('#slideshow div.image');
var desc = $(this).find('#slideshow div.description');
$('#slideshow ul').cycle({
    fx:    'scrollHorz', 
    speed:  'fast', 
    timeout: 5000,
    next:   '.next',
    pause: 1,
    slideExpr: img
});
$('#slideshow').cycle({
    fx:    'scrollVert', 
    speed:  'fast', 
    timeout: 5000,
    next:   '.next',
    pause: 1,
    slideExpr: desc
});
¿Fue útil?

Solución

Creo que deberías:

  1. Haga su propia función personalizada para la emisión tiempo de manipulación (una bastante simple función JS hará el truco).
  2. Establecer la propiedad “tiempo de espera” en sus ciclos a 0 por lo que no se auto-avance.
  3. Uso de los comandos disponibles “anterior” y “siguiente” en la función personalizada en esta forma:

$('#slideshow').cycle('next');

Veo el enfoque en su código, conseguido gracias al gran idea que sólo me dio Tho.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top