Frage

Ich habe mit jQuery Cycle-Diashow, aber ich habe ein Problem mit den Timer. Nach paar Zyklen sind in Unordnung sie auf. Wie kann ich fusionieren zwei Zyklus-Animationen in einer Funktion und mit einem Timer?

Danke für jede Hilfe.

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
});
War es hilfreich?

Lösung

Ich denke, Sie sollten:

  1. Machen Sie Ihre eigene Funktion für die Zeit der Handhabung Ausgabe (eine ziemlich einfache JS-Funktion den Trick tun wird).
  2. Stellen Sie die „timeout“ Eigenschaft in Ihren Zyklen auf 0, so wird es nicht automatisch avance.
  3. Verwenden Sie die verfügbaren Befehle „zurück“ und „weiter“ in der benutzerdefinierten Funktion in dieser Form:

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

Ich sehe den Ansatz in Ihrem Code, ich muss danken Ihnen die große Idee, die Sie gab mir nur Tho.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top