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 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
使用vue制作滑动标签
Sep 21 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
分享一下贝贝成长进度的php代码
2012/09/14 PHP
使用php清除bom示例
2014/03/03 PHP
php短址转换实现方法
2015/02/25 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
xml和web特殊字符
2009/04/28 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
阳光体育活动总结
2014/04/30 职场文书
委托书的写法
2014/08/30 职场文书
上党课的心得体会
2014/09/02 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
2014年财政工作总结
2014/12/10 职场文书
零基础学java之循环语句的使用
2022/04/10 Java/Android
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js
解决vue中provide inject的响应式监听
2022/04/19 Vue.js