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) 定义类
May 18 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 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之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
php 可变函数使用小结
2018/06/12 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
在python 中实现运行多条shell命令
2019/01/07 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
使用pandas读取文件的实现
2019/07/31 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
毕业留言寄语大全
2014/04/10 职场文书
团支部推优材料
2014/05/21 职场文书
Python字典和列表性能之间的比较
2021/06/07 Python
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript