javascript - 在元素悬停时播放 bxSlider

Question

我有一个 wordpress 循环将多个 bxsliders 加载到一个页面上，我希望这些 slider 单独启动并在悬停父元素时单独停止。我不知道该怎么做。

显然我需要使用

$('.item').each

但我不确定如何在悬停时停止和启动 bxslider。有人有解决方案吗？

下面是一些示例代码:

if ( have_posts() ) while ( have_posts() ) : the_post(); 
            ?>
                <div class="item">
                            <div class="thumbnail clearfix">
                                <ul>
                                    <li><?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
                                        <h1 title="<?php the_title(); ?>" >
                                            <a href="<?php the_field('website_url'); ?>"><?php the_post_thumbnail(); ?></a>
                                        </h1>
                                        <?php endif; ?>
                                    </li>
                                    <li>
                                        <div>
                                        <?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                        <?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'third-image'); endif; ?>
                                        </div>
                                    </li>
                                </ul>
                             </div>
                     </div> 
<?php endwhile; ?>

所以你可以看到我在 slider 中拉出 3 个缩略图...这是在帖子中，因此页面上可能有 1 到 10 个之间的任何地方。

我的第一个想法是在悬停时启动 bxslider....

    $('.item').each(function(){
    $(this).hover({
        $(this).find('.thumbnail ul').bxSlider({
            auto: true
        });
    });
});

但这行不通。我想要它如何，我希望它在每个 slider 上构建 slider ......然后当用户悬停时使 slider 启动......并在鼠标关闭时停止。

提前致谢。

Answer 1

您应该查看 bxSlider API 方法 here :

解决方案是使用 .startAuto(); 和 .stopAuto();:

$('.bxSlider').each(function() {
    var _this = $(this).bxSlider({
        auto: false,
        speed: 200,
        pause: 500
    });
    _this.mouseenter(function() {   
         _this.startAuto();      
     }).mouseleave(function() {   
         _this.stopAuto();
    });
});

示例: http://jsfiddle.net/verber/KBfx9/28/

要将事件与父级 slider 相关联，请使用这个:

     $('.yourParentParent').mouseenter(function() {   
         _this.startAuto();      
     }).mouseleave(function() {   
         _this.stopAuto();
     });

如果您不想启动页面上的所有 slider ，请将 _this 更改为您的确切 bxSlider 选择器。