bxSlider特性

1.充分响应各种设备,适应各种屏幕;

2.支持多种滑动模式,水平、垂直以及淡入淡出效果;

3.支持图片、视频以及任意html内容;

4.支持触摸滑动;

5.支持Firefox,Chrome,Safari,iOS,Android,IE7+

如何使用bxSlider

1、首先是加载jQuery库,以及bxSlider插件文件和相关CSS文件,您可以从官方网站下载最新版本的bxSlider

 
<link rel="stylesheet" type="text/css" href="jquery.bxslider.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="jquery.bxslider.min.js"></script> 

2、准备滑动内容,我们创建一个ul.bxslider,然后在其子元素li中加入滑动内容,滑动内容可以是图片、视频以及任意html内容:

 
<ul class="bxslider"> 
      <li><img src="data:images/s1.jpg" /></li> 
      <li><img src="data:images/s2.jpg" /></li> 
      <li><img src="data:images/s3.jpg" /></li> 
</ul> 

3、调用bxSlider插件,当页面内容加载完时调用bxSlider。

 
$(function(){ 
    $('.bxslider').bxSlider(); 
}); 

bxSlider选项设置

bxSlider提供了丰富的选项可配置,以下我们列出最主要也是最常用的选项设置。

参数 描述 默认值
mode 设置滑动模式,'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出 horizontal
speed 内容切换速度,数字,ms 500
startSlide 初始滑动位置,数字 0
randomStart 随机初始滑动位置 true
infiniteLoop 循环滑动,如果设置为true时,则到最后滑动位置时会切换到初始位置 true
easing 切换动画扩展,可以借助jQuery Easing 动画效果扩展设置不同的切换动画效果 null
captions 设置显示图片标题,当滑动内容为图片时并设置属性title,可以显示图片标题 false
video 支持视频,当设置为true时,需要jquery.fitvids.js支持 false
pager 设置是否显示分页,设置为true时,会在滑动内容下方显示分页图标 true
controls 设置是否显示上一副和下一幅按钮 true
auto 设置是否自动滑动 false
pause 自动滑动时停留时间,数字,ms 4000
autoHover 当鼠标滑向滑动内容上时,是否暂停滑动 false

更多bxSlider的选项设置,请参照bxSlider官网:http://bxslider.com/options

响应式内容滑动插件bxSlider的更多相关文章

  1. 响应式内容滑动插件jQuery.bxSlider

    bxSlider特性 1.充分响应各种设备,适应各种屏幕: 2.支持多种滑动模式,水平.垂直以及淡入淡出效果: 3.支持图片.视频以及任意html内容: 4.支持触摸滑动: 5.支持Firefox,C ...

  2. 20 个非常棒的jQuery内容滑动插件

    Wow Slider  WOW Slider是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑, ...

  3. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  4. [转]响应式表格jQuery插件 – Responsive tables

    本文转自:http://www.shejidaren.com/responsive-tables-for-bootstrap-3.html 这个Responsive tables jQuery插件依赖 ...

  5. Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab

     今天我们要实现的这个效果呢,在Android的应用中十分地常见,我们可以看到下面两张图,无论是系统内置的联系人应用,还是AnyView的阅读器应用,我们总能找到这样的影子,当我们滑动屏幕时,Tab可 ...

  6. FooTable高级的响应式表格jQuery插件

    FooTable是一个高级jQuery插件,允许开发者在触屏智能手机及平板电脑等小型设备上制作数据非常惊人的HTML表格.它可以将HTML表转换成可扩展的响应式表格,且通过单击某一行即可将该行数据隐藏 ...

  7. 响应式瀑布流插件Grid-A-Licious

    Grid-A-Licious是一款遵守MIT协议的响应式瀑布流插件.该插件总代码行不超过400行,实现很巧妙,使用时也很流畅.实现原理也很简单,根据屏幕宽度和参数中设置的列宽度以及每项之间的间隔宽度, ...

  8. 另外一款超棒的响应式布局jQuery插件 – Freetile.js

    在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...

  9. S Gallery – 很有特色的响应式 jQuery 相册插件

    S Gallery 是一款响应式的 jQuery 相册插件.使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用. 这款插件它有一个特色功能 ...

随机推荐

  1. C语言的本质(30)——C语言与汇编之ELF文件格式

    ELF(Executable and Linking Format)文件格式是一个开放标准,各种UNIX系统的可执行文件都采用ELF格式,ELF是一种对象文件的格式,用于定义不同类型的对象文件(Obj ...

  2. wireshark的 rdp dissector

    开源 wireshark的 rdp dissector https://github.com/boytm/wireshark_rdp. 1)support TCP reassemble 2)Fastp ...

  3. Another attempt about LSI

    Last week I was here Natural Language Processing in NZ. Someone asked a question, is there any exist ...

  4. linux shell命令行下操作mysql 删除mysql指定数据库下的所有表--亲测成功百分百测试通过--绝对可靠

    1,在shell提示符下查看mysql指定数据库下的表等数据

  5. 能上QQ无法打开网页

    能上QQ无法上网电脑故障解决方法 Winsock协议配置故障解决方法 第1步 :单击开始菜单中的运行,并在打开的运行窗口中键入“cmd”并回车确定,打死命令提示符窗口. 第2步 :在打开的命令提示符窗 ...

  6. hdu 2851(最短路)

    点击打开链接 竟然是最短路!!!! 藏的好深啊 /* 求从路1走到路i的最小危险值, 给出n条路的起点和终点,当i,j两路有重合的,我们使map[i][j]=v[j]: 把路当作最短路中的点,如果有重 ...

  7. 深入理解 Javascript 面向对象编程(转)

    一:理解构造函数原型(prototype)机制 prototype是javascript实现与管理继承的一种机制,也是面向对象的设计思想.构造函数的原型存储着引用对象的一个指针,该指针指向与一个原型对 ...

  8. DBSCAN(Density-based spatial clustering of applications with noise)

    Density-based spatial clustering of applications with noise (DBSCAN) is a data clustering algorithm ...

  9. Oracle Semaphore Management in UNIX Administration

    Oracle UNIX/Linux Tips by Burleson Consulting Semaphores and Oracle 11g 信号量和数据库 Semaphores are data ...

  10. 一个利用Dataflow实现的Actor

    最近进行并发数据处理,学习到了 Actor模型,其中最简单的实现方式是一位大牛利用Dataflow实现的. 大牛的方案:http://www.jayway.com/2013/11/15/an-acto ...