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 相关文章推荐
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
JavaScript文档对象模型DOM
Nov 20 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函数
2010/01/11 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
Python实现身份证号码解析
2015/09/01 Python
python write无法写入文件的解决方法
2019/01/23 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
python中如何打包用户自定义模块
2020/09/23 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
25道Java面试题集合
2013/05/21 面试题
中英双版中文教师求职信
2013/10/27 职场文书
通信工程专业毕业生推荐信
2013/12/25 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
好邻里事迹材料
2014/01/16 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
春节随笔
2015/08/15 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL