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


Posted in Javascript onNovember 25, 2016

最近博主在项目中用到一款轮播组件,功能齐全,可以设置各种标题样式、动画效果、轮播时间、开始暂停等功能,在此推荐给大家,供大家参考。

一、效果展示

多说无益,来看一组效果展示图,感受一下!

1、先跟大家见个面,打个招呼

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

2、什么?切换太慢了?好,加快速度!

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

3、加入其他功能

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

4、图片太小,看不出效果?好,那来个大图感受下!

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

5、如果你不想要右上角的小图标,照样可以。

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

6、如果你对上述滑动效果不满意,组件提供了其他几种图片切换方式

淡入淡出

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

水平滑动

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

7、再来一张图片定位

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

二、组件介绍

Orbit是一款github上面的开源组件,需要jquery的支持,开源地址。

三、代码示例

它的使用也是相当简单,首先下载源码,引用需要的组件到页面里面来。

<link href="~/Content/orbit-master/orbit-1.3.0.css" rel="stylesheet" />

 <script src="~/Content/jquery-1.9.1.js"></script>
<script src="~/Content/orbit-master/jquery.orbit-1.3.0.js"></script>

然后htmll代码如下

<div class="container">
<div id="featured">
<img src="/Content/image/Logo/1.jpg" data-caption="#htmlCaption1" />
<img src="/Content/image/Logo/2.jpg" data-caption="#htmlCaption2" />
<img src="/Content/image/Logo/3.jpg" data-caption="#htmlCaption3" />
<img src="/Content/image/Logo/4.jpg" data-caption="#htmlCaption4" />
<img src="/Content/image/Logo/5.jpg" data-caption="#htmlCaption5" />
<img src="/Content/image/Logo/6.jpg" data-caption="#htmlCaption6" />
<img src="/Content/image/Logo/7.jpg" data-caption="#htmlCaption7" />
</div>
<!-- Captions for Orbit -->
<span class="orbit-caption" id="htmlCaption1"><strong>1</strong></span>
<span class="orbit-caption" id="htmlCaption2"><strong>2</strong></span>
<span class="orbit-caption" id="htmlCaption3"><strong>3</strong></span>
<span class="orbit-caption" id="htmlCaption4"><strong>4</strong></span>
<span class="orbit-caption" id="htmlCaption5"><strong>5</strong></span>
<span class="orbit-caption" id="htmlCaption6"><strong>6</strong></span>
<span class="orbit-caption" id="htmlCaption7"><strong>7</strong></span>
</div>

这都是固定结构,div里面的id="featured"用于初始化组件

最后js初始化

<script type="text/javascript">
$(function () {
$('#featured').orbit();
});
</script>

以上简单代码就完成了上述实例图片3的效果。是不是很easy!

1、初始化常用属性介绍

上述通过简单的代码就可以完成我们组件的初始化,其实初始化方法 $('#featured').orbit(); 并不是固定,它可以传入多个参数,实现不同的轮播效果。由于该组件文档并不是非常齐全,这些属性都是通过查看源码找到的,以下博主就根据自己的一些尝试和理解介绍一些常用的初始化属性。

advanceSpeed属性用于设置图片的切换时间,默认值是4000,单位是毫秒。

timer属性用于控制是否启动开始暂停功能,就是我们右上角的那个小图标,原来就是通过它来控制的。默认true(开启)。

animation属性用于控制图片切换的动画效果,可用的选项有fade(淡入), horizontal-slide(垂直滑动), vertical-slide(水平滑动), horizontal-push, vertical-push总共5种。

captions属性表示是否启用图片标题。

captionAnimation属性用于控制标题的切换动画。

directionalNav属性控制是否启用上一页、下一页按钮功能。

其他更多初始化属性可以自行查看源码:

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

最终的用法如下:

$('#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实现带暂停功能的轮播组件(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 函数式编程
Aug 16 Javascript
JavaScript 高级语法介绍
Jun 15 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
JavaScript canvas实现流星特效
May 20 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 #Javascript
Bootstrap基本布局实现方法详解
Nov 25 #Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 #Javascript
Bootstrap栅格系统学习笔记
Nov 25 #Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 #Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 #Javascript
javaScript语法总结
Nov 25 #Javascript
You might like
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
使用Python编写vim插件的简单示例
2015/04/17 Python
python操作mysql数据库
2017/03/05 Python
Python正则表达式知识汇总
2017/09/22 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
python图形用户接口实例详解
2019/12/16 Python
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
文员的职业生涯规划发展方向
2014/02/08 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
干部培训简讯
2015/07/20 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS