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 相关文章推荐
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 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
初探PHP5
2006/10/09 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
python修改操作系统时间的方法
2015/05/18 Python
Python中类型检查的详细介绍
2017/02/13 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
Python和Bash结合在一起的方法
2020/11/13 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
公务员岗前培训心得体会
2016/01/08 职场文书
责任书格式
2019/04/18 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python