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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
JS的replace方法介绍
Oct 20 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
layui select 禁止点击的实现方法
Sep 05 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
python实现在pickling的时候压缩的方法
2014/09/25 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
移动通信专业自荐信范文
2013/11/12 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
公司欠款证明
2015/06/24 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL