jQuery响应式滑动轮播插件bxSlider.js

jQuery响应式滑动轮播插件bxSlider.js

bxSlider是一个基于jQuery库的内容滑动轮播插件,支持自适应多种屏幕终端显示,轻
0
  • 详情内容
  • 留言反馈

bxSlider是一个基于jQuery库的内容滑动轮播插件,支持自适应多种屏幕终端显示,轻量级易于使用。

bxSlider特性

1.充分响应各种设备,适应各种屏幕;

2.支持多种滑动模式,水平、垂直以及淡入淡出效果;

3.支持图片、视频以及任意html内容;

4.支持触摸滑动;

5.支持Firefox,Chrome,Safari,iOS,Android,IE7+

如何使用bxSlider

1、首先是加载jQuery库(建议引用本地资源),以及bxSlider插件文件和相关CSS文件,您可以从官方网站下载最新版本的bxSlider。

<link rel="stylesheet" type="text/css" href="jquery.bxslider.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="jquery.bxslider.min.js"></script>

2、准备滑动内容,我们创建一个ul.bxslider,然后在其子元素li中加入滑动内容,滑动内容可以是图片、视频以及任意html内容:

<ul class="bxslider"> 
      <li><img src="images/s1.jpg" /></li> 
      <li><img src="images/s2.jpg" /></li> 
      <li><img src="images/s3.jpg" /></li> 
</ul>

3、调用bxSlider插件,当页面内容加载完时调用bxSlider。

$(function(){ 
    $('.bxslider').bxSlider(); 
});

这样,一个超酷的内容滑动效果就实现了,将浏览器窗口放大和缩小可以看到滑动内容会随着浏览器窗口自动调整大小。bxSlider提供了丰富的配置选项,可以设置不同参数满足各种客户需求,来看它的选项配置。

bxSlider选项参数设置

bxSlider提供了丰富的选项可配置,以下我们列出最主要也是最常用的选项设置。

参数描述默认值
mode设置滑动模式,'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出horizontal
speed内容切换速度,数字,ms500
startSlide初始滑动位置,数字0
randomStart随机初始滑动位置true
infiniteLoop循环滑动,如果设置为true时,则到最后滑动位置时会切换到初始位置true
easing切换动画扩展,可以借助jQuery Easing 动画效果扩展设置不同的切换动画效果null
captions设置显示图片标题,当滑动内容为图片时并设置属性title,可以显示图片标题false
video支持视频,当设置为true时,需要jquery.fitvids.js支持false
pager设置是否显示分页,设置为true时,会在滑动内容下方显示分页图标true
controls设置是否显示上一副和下一幅按钮true
auto设置是否自动滑动false
pause自动滑动时停留时间,数字,ms4000
autoHover当鼠标滑向滑动内容上时,是否暂停滑动false

部分参数说明:

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

不来两句?也可以是问题反馈和建议

支持Ctrl+Enter提交
暂无留言,快抢沙发!
0

真心很赞,必须打赏!嗯,以资鼓励~

点此打赏

99%看过的人还会看