jQuery-Zyklus - zwei Animationen in einem Zyklus
-
11-10-2019 - |
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
});
Lösung
Ich denke, Sie sollten:
- Machen Sie Ihre eigene Funktion für die Zeit der Handhabung Ausgabe (eine ziemlich einfache JS-Funktion den Trick tun wird).
- Stellen Sie die „timeout“ Eigenschaft in Ihren Zyklen auf 0, so wird es nicht automatisch avance.
- 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