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 相关文章推荐
jquery JSON的解析方式
Jul 25 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
Ajax基础知识详解
Feb 17 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
Promise扫盲贴
Jun 24 Javascript
js基础之事件捕获与冒泡原理
Oct 09 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 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
destoon官方标签大全
2014/06/20 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
一个基于jquery的文本框记数器
2012/09/19 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
水果连锁超市创业计划书
2014/01/24 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
元旦活动感言
2014/03/08 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
拔河比赛口号
2014/06/10 职场文书
信用卡工作证明模板
2014/09/14 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
公司离职证明标准格式
2014/11/18 职场文书
2016年春节慰问信息
2015/03/25 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏