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 DIV弹出效果实现代码
Jul 03 Javascript
Mootools 1.2教程 正则表达式
Sep 15 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
webpack 模块热替换原理
Apr 09 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
JPype实现在python中调用JAVA的实例
2017/07/19 Python
python下10个简单实例代码
2017/11/15 Python
python实现二叉查找树实例代码
2018/02/08 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
德国自行车商店:Tretwerk
2019/06/21 全球购物
国际商务专业学生个人的自我评价
2013/09/28 职场文书
保密工作承诺书
2014/08/29 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
同学聚会祝酒词
2015/08/10 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL