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 相关文章推荐
JavaScript更改class和id的方法
Oct 10 Javascript
比Jquery的document.ready更快的方法
Apr 28 Javascript
Javascript调用C#代码
Jan 17 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
Vue数据双向绑定原理实例解析
May 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函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
跟老齐学Python之重回函数
2014/10/10 Python
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python爬取网易云音乐评论
2018/11/16 Python
django的settings中设置中文支持的实现
2019/04/28 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
numpy.array 操作使用简单总结
2019/11/08 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
美国手机支架公司:PopSockets
2019/11/27 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
文明倡议书范文
2014/04/15 职场文书
好学生评语大全
2014/05/05 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS