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基础资料整理2
Dec 06 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
Element-UI+Vue模式使用总结
Jan 02 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实现批量查询清除一句话后门的代码
2008/01/20 PHP
自定义php类(查找/修改)xml文档
2013/03/26 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
降低PHP Redis内存占用
2017/03/23 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
VUE 动态组件的应用案例分析
2019/12/02 Javascript
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
Django的models模型的具体使用
2019/07/15 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
python属于解释语言吗
2020/06/11 Python
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
东方红海科技面试题软件测试方面
2012/02/08 面试题
回门宴新郎答谢词
2014/01/12 职场文书
大学社团计划书
2014/05/01 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
信访维稳承诺书
2015/05/04 职场文书