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 和 Java 的区别浅析
Jul 31 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
Vue实现圆环进度条的示例
Feb 06 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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
JavaScript 密码强度判断代码
2009/09/05 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
python tkinter界面居中显示的方法
2018/10/11 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
出国导师推荐信
2014/01/16 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
高校教师岗位职责
2014/03/18 职场文书
开业主持词
2014/03/21 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python