Bootstrap实现带暂停功能的轮播组件(推荐)(2)

$('#featured').orbit({ //advanceSpeed: 4000,//图片切换时间 //timer:false, //是否启动开始暂停功能 //animation: 'fade', //动画效果:有fade(淡入), horizontal-slide(垂直滑动), vertical-slide(水平滑动), horizontal-push, vertical-push //captions: false, //是否启用标题 //captionAnimation: 'slideOpen', //标题动画 //directionalNav: false,//是否启用上一页、下一页功能 });

2、组件常用方法和事件解析

除了初始化的属性之外,组件还提供了多个事件供我们调用。查看组件源码可以看到如下几句:

Bootstrap实现带暂停功能的轮播组件(推荐)

这个表示给当前标签绑定了上述一些事件。我们如何使用它们呢。比如上文博主使用的定位图片的功能,我们可以这么写。

$("#featured").trigger('orbit.goto', 3);//定位到第四张图片。注意这里的索引是从0开始。 $('#featured').trigger('orbit.stop');//停止图片轮询 $('#featured').trigger('orbit.start');//启用图片轮询

当然,还有他们的像orbit.next、orbit.prev这些事件应该也很好理解,就表示切换到下一张和上一张图片。

以上所述是小编给大家介绍的Bootstrap实现带暂停功能的轮播组件(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzzyxz.html