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 数字转换研究总结
Dec 26 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 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 miniBB中文乱码问题解决方法
2008/11/25 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
JS 页面计时器示例代码
2013/10/28 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
python反编译学习之字节码详解
2019/05/19 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
python实现梯度下降法
2020/03/24 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
英语专业毕业生自荐信范文
2013/12/31 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
教师节活动主持词
2014/04/02 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
给上级领导的感谢信
2015/01/22 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
写给老师的保证书
2015/05/09 职场文书
工作收入证明模板
2015/06/12 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
解决golang 关于全局变量的坑
2021/05/06 Golang
Nginx源码编译安装过程记录
2021/11/17 Servers
SQL Server删除表中的重复数据
2022/05/25 SQL Server