jQuery插件bxSlider实现响应式焦点图


Posted in Javascript onApril 12, 2015

优秀响应式jQuery焦点图插件bxSlider,优秀响应式布局设计jQuery插件,自适
应任何设备,切换内容可以是视频、图片、HTML、支持触摸设备,自定义函数
callback,支持众多的参数自定义配置,浏览器支持Firefox, Chrome, Safari,
iOS, Android, IE7+。

jQuery插件bxSlider实现响应式焦点图

使用方法:

1. 加载jQuery和插件

<!-- jQuery library (served from Google) --> 
<script src="jquery/1.8.2/jquery.min.js"></script> 
<!-- bxSlider Javascript file --> 
<script src="/js/jquery.bxslider.min.js"></script> 
<!-- bxSlider CSS file --> 
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

2.HTML内容

<ul class="bxslider"> 
 <li><img src="/images/pic1.jpg" /></li> 
 <li><img src="/images/pic2.jpg" /></li> 
 <li><img src="/images/pic3.jpg" /></li> 
 <li><img src="/images/pic4.jpg" /></li> 
</ul>

3.函数调用

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

函数选项配置请自定义配置。
查看DEMO   官网下载

以上所述就是本文的全部内容了,希望大家能够喜欢

Javascript 相关文章推荐
js实现目录定位正文示例
Nov 14 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
js实现两点之间画线的方法
May 12 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 #Javascript
jQuery插件pagination实现分页特效
Apr 12 #Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 #Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 #Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 #Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 #Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 #Javascript
You might like
PHP中常用数组处理方法实例分析
2008/08/30 PHP
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
vue实现登录功能
2020/12/31 Vue.js
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
python re正则表达式模块(Regular Expression)
2014/07/16 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
python安装Scrapy图文教程
2017/08/14 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
详解python中@的用法
2019/03/27 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
法律进学校实施方案
2014/03/15 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS