Mit jQuery Cycle2 Plugin Pictures wird das Drehen mit dem Hover auf dem Bild gestartet, was einwandfrei funktioniert, aber wie würde ich zum ersten Bild in der Liste beim Hover-Out-Ereignis zurückkehren.
HTML
<div class="col-md-15 col-sm-3">
<ul class="cycle-slideshow1"
data-cycle-slides="li"
data-cycle-fx=shuffle
data-cycle-shuffle-right=0
data-cycle-shuffle-top="-75"
data-cycle-timeout=1000
data-cycle-caption="#alt-caption"
data-cycle-caption-template="{{alt}}"
>
<!-- Slideshow
=========================-->
<li><a href="/"><img alt="caption1" class="img-responsive" src="/images//wp-content/uploads/2014/05/1.jpg"/></a></li>
<li><a href="/"><img alt="caption2" class="img-responsive" src="/images//wp-content/uploads/2014/05/2.jpg"/></a></li>
<li><a href="/"><img alt="caption" class="img-responsive" src="/images//wp-content/uploads/2014/05/4_small.jpg"/></a></li>
</ul>
<div class="cycle-caption">SHOP</div>
</div>
jQuery
$(".cycle-slideshow1").cycle("pause");
$(".cycle-slideshow1").hover(function () {
//mouse enter - Resume the slideshow
$(".cycle-slideshow1").cycle("resume");
$(this).parent().find(".cycle-caption").fadeIn();
},
function () {
//mouse leave - Pause the slideshow
$(".cycle-caption").hide();
$(".cycle-slideshow1").cycle("pause");
});
Antworten:
0 für die Antwort № 1Es gibt einen goto-Befehl für Cycle per the api. Ich habe ihn im mouseout-Bereich des Hover-Event-Handlers hinzugefügt.
$(".cycle-slideshow1").cycle("pause");
$(".cycle-slideshow1").hover(function () {
//mouse enter - Resume the slideshow
$(".cycle-slideshow1").cycle("resume");
$(this).parent().find(".cycle-caption").fadeIn();
},
function () {
//mouse leave - Pause the slideshow
$(".cycle-slideshow1").cycle("goto", 0);
$(".cycle-caption").hide();
$(".cycle-slideshow1").cycle("pause");
});