Question

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

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

Answer 1

有一个针对api的循环的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');
});

jQuery Cycle2悬停图片问题

1 个答案: