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 window.print实现打印特定控件或内容
Sep 16 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
JS闭包原理及其使用场景解析
Dec 03 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
1.PHP简介
2006/10/09 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
php实现session共享的实例方法
2019/09/19 PHP
分页栏的web标准实现
2011/11/01 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
python Socket之客户端和服务端握手详解
2017/09/18 Python
Python之web模板应用
2017/12/26 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
幼师中班个人总结
2015/02/12 职场文书
小学副班长竞选稿
2015/11/21 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android