关于悬停图像问题的jQuery Cycle2答案

【问题标题】：jQuery Cycle2 on hover image issue关于悬停图像问题的jQuery Cycle2
【发布时间】：2014-06-13 18:38:38
【问题描述】：

使用 jQuery Cycle2 插件图片旋转是在图像上悬停时开始的，这工作正常，但是我如何在悬停事件时反转到列表中的第一个图像。

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="/wp-content/uploads/2014/05/1.jpg"/></a></li>
                    <li><a href="/"><img alt="caption2" class="img-responsive" src="/wp-content/uploads/2014/05/2.jpg"/></a></li>
                    <li><a href="/"><img alt="caption" class="img-responsive" src="/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');
});

【问题讨论】：

标签： jquery plugins cycle

【解决方案1】：

每个 api 都有一个用于 Cycle 的 goto 命令。我已将它添加到悬停事件处理程序的 mouseout 部分。

$('.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');
});

【讨论】：