jquery插件bxslider用法实例分析


Posted in Javascript onApril 16, 2015

本文实例讲述了jquery插件bxslider用法。分享给大家供大家参考。具体用法如下:

首先调用对应js文件:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>

jQuery代码部分:

$(function(){ 
 $('#marquee').bxSlider({ 
  mode:'vertical', //默认的是水平 
  displaySlideQty:1,//显示li的个数 
  moveSlideQty: 1,//移动li的个数  
  captions: true,//自动控制 
  auto: true, 
  controls: false//隐藏左右按钮 
 }); 
});

HTML结构如下:

<div style="width:450px; height:296px; float:left; 
overflow:hidden; margin-left:200px;">
 <ul id="marquee">
  <li>
  <img src="img/1.jpg" alt="banner_美容" 
  style="width:450px; height:296px;">
  </li>
  <li>
  <img src="img/2.jpg" alt="banner_美容"
  style="width:450px; height:296px;">
  </li>
 </ul>
</div>

CSS定义左右按钮样式:

.bx-prev{ 
width:12px; height:26px; 
background:#f00;text-indent: -999999px;z-index: 999; 
position: absolute; float:left; left:455px; top:110px;
}
.bx-next{ 
width:12px; height:26px; 
background:#f00; text-indent: -999999px;
z-index: 999; 
position: absolute; top:110px;left:-15px;
}

参数说明:

bxSlider 详细配置参数:
bxSlider有很多配置参数,使你能够用参数制作出各种各样的slider效果:

mode: 'horizontal', // 'horizontal', 'vertical', 'fade' 定义slider滚动的方向,有三个值可供选择
infiniteLoop: true, // true, false - display first slide after last 无限循环
hideControlOnEnd: false, // true, false - if true, will hide 'next' control on last slide and 'prev' control on first 如果设置true,将会在最后一个幻灯片隐藏“next”,在最前面的幻灯片因此“prev”
controls: true, // true, false - previous and next controls 是否显示“previous”和“next”按钮
speed: 500, // integer - in ms, duration of time slide transitions will occupy   速度,单位为毫秒
easing: 'swing', // used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options
pager: true, // true / false - display a pager
pagerSelector: null, // jQuery selector - element to contain the pager. ex: '#pager'
pagerType: 'full', // 'full', 'short' - if 'full' pager displays 1,2,3... if 'short' pager displays 1 / 4   如果设置full,将显示1,2,3……,如果设置short,将显示1/4 .
pagerLocation: 'bottom', // 'bottom', 'top' - location of pager 页码的位置
pagerShortSeparator: '/', // string - ex: 'of' pager would display 1 of 4 页面分隔符
pagerActiveClass: 'pager-active', // string - classname attached to the active pager link 当前页码的className
nextText: 'next', // string - text displayed for 'next' control 下一页的文字
nextImage: '', // string - filepath of image used for 'next' control. ex: 'images/next.jpg' 可以设置下一页为图片
nextSelector: null, // jQuery selector - element to contain the next control. ex: '#next'
prevText: 'prev', // string - text displayed for 'previous' control 上一页的文字
prevImage: '', // string - filepath of image used for 'previous' control. ex: 'images/prev.jpg' 上一页的图片
prevSelector: null, // jQuery selector - element to contain the previous control. ex: '#next'
captions: false, // true, false - display image captions (reads the image 'title' tag) 是否显示图片的标题,读取图片的title属性的内容。
 
captionsSelector: null, // jQuery selector - element to contain the captions. ex: '#captions'
auto: false, // true, false - make slideshow change automatically 幻灯片自动滚动
autoDirection: 'next', // 'next', 'prev' - direction in which auto show will traverse 自动滚动的顺序
autoControls: false, // true, false - show 'start' and 'stop' controls for auto show 自动滚动的控制键
autoControlsSelector: null, // jQuery selector - element to contain the auto controls. ex: '#auto-controls'
autoStart: true, // true, false - if false show will wait for 'start' control to activate 
autoHover: false, // true, false - if true show will pause on mouseover 设置鼠标mouseover将会使自动滚动暂停
autoDelay: 0, // integer - in ms, the amount of time before starting the auto show
pause: 3000, // integer - in ms, the duration between each slide transition  过渡时间
startText: 'start', // string - text displayed for 'start' control 开始按钮的文字
startImage: '', // string - filepath of image used for 'start' control. ex: 'images/start.jpg' 开始按钮的图片
stopText: 'stop', // string - text displayed for 'stop' control 停止按钮的文本
stopImage: '', // string - filepath of image used for 'stop' control. ex: 'images/stop.jpg'   停止按钮的图片
ticker: false, // true, false - continuous motion ticker mode (think news ticker)
// note: autoControls and autoControlsSelector apply to ticker!
tickerSpeed: 5000, // integer - has an inverse effect on speed. therefore, a value of 10000 will 
// scroll very slowly while a value of 50 will scroll very quickly.
tickerDirection: 'next', // 'next', 'prev' - direction in which ticker show will traverse
tickerHover: false, // true, false - if true ticker will pause on mouseover
wrapperClass: 'bx-wrapper', // string - classname attached to the slider wraper
startingSlide: 0, // integer - show will start on specified slide. note: slides are zero based!
displaySlideQty: 1, // integer - number of slides to display at once
moveSlideQty: 1, // integer - number of slides to move at once
randomStart: false, // true, false - if true show will start on a random slide

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
微信小程序如何再次获取用户授权的方法
May 10 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 Javascript
vuex的使用步骤
Jan 06 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
JQuery显示、隐藏div的几种方法简明总结
Apr 16 #Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 #Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 #Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 #Javascript
jQuery Ajax使用实例
Apr 16 #Javascript
javascript等号运算符使用详解
Apr 16 #Javascript
php常见的页面跳转方法汇总
Apr 15 #Javascript
You might like
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
javascript自启动函数的问题探讨
2013/10/05 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
Python自定义简单图轴简单实例
2018/01/08 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
python中使用print输出中文的方法
2018/07/16 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
法院授权委托书范文
2014/08/02 职场文书
公司委托书范本5篇
2014/09/20 职场文书
考研英语复习计划
2015/01/19 职场文书
2015年中个人总结范文
2015/03/10 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
python在package下继续嵌套一个package
2022/04/14 Python
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技