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代码(如:name,age)
Aug 10 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
VueJs监听window.resize方法示例
Jan 17 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
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对象类型判断
2008/08/27 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
基于JQuery制作的产品广告效果
2010/12/08 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
全面了解Python环境配置及项目建立
2016/06/30 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
简单实现python聊天程序
2018/04/01 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
python selenium xpath定位操作
2020/09/01 Python
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
任意存:BOXFUL
2018/05/21 全球购物
生产车间班组长岗位职责
2014/01/06 职场文书
齐云山导游词
2015/02/06 职场文书
汶川大地震感悟
2015/08/10 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
员工试用期工作总结
2019/06/20 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android