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添加输出窗口的代码
Feb 07 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 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
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
Python实现拼接多张图片的方法
2014/12/01 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
使用numba对Python运算加速的方法
2018/10/15 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
舞蹈教育学专业自荐信
2014/06/15 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
用Python实现Newton插值法
2021/04/17 Python