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实现多域名不同文件的调用方法
Jan 12 Javascript
JavaScript对象模型-执行模型
Apr 28 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
关于Vue中的options选项
Mar 22 Vue.js
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中路径问题的解决方案
2006/10/09 PHP
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
php通过session防url攻击方法
2014/12/10 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
php经典趣味算法实例代码
2020/01/21 PHP
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
python实现图片转字符小工具
2019/04/30 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
建筑项目策划书
2014/01/13 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
公关活动策划方案
2014/05/25 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
第一节英语课开场白
2015/06/01 职场文书
Redis唯一ID生成器的实现
2022/07/07 Redis
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS