我有一个 wordpress 循环将多个 bxslider 加载到一页上,我希望这些 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 启动...并在鼠标关闭时停止。
提前致谢。
最佳答案
您应该查看 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 选择器。
关于javascript - 在元素悬停时播放 bxSlider,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22508823/