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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 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中strlen和mb_strlen的区别
2014/08/31 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
Node.js的特点详解
2017/02/03 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
python多重继承实例
2014/10/11 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
python中xlutils库用法浅析
2020/12/29 Python
struct与class的区别
2014/02/03 面试题
介绍一下Make? 为什么使用make
2016/07/31 面试题
申请任职学生会干部自荐书范文
2014/02/13 职场文书
检查接待方案
2014/02/27 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
卫生巾广告词
2014/03/18 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
2016年元旦寄语
2015/08/17 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
Python序列化模块JSON与Pickle
2022/06/05 Python