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 相关文章推荐
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 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
ThinkPHP文件上传实例教程
2014/08/22 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
python检测远程udp端口是否打开的方法
2015/03/14 Python
浅谈Django的缓存机制
2018/08/23 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
Opencv求取连通区域重心实例
2020/06/04 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
英语系毕业生自荐信
2013/10/31 职场文书
播音主持专业个人自我评价
2014/01/09 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
数字化校园建设方案
2014/05/03 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
单位考核聘任报告
2015/03/02 职场文书
中学总务处工作总结
2015/08/12 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL