100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 响应式内容滑动插件jQuery.bxSlider

响应式内容滑动插件jQuery.bxSlider

时间:2019-09-05 01:41:00

相关推荐

响应式内容滑动插件jQuery.bxSlider

bxSlider特性

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

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

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

4.支持触摸滑动;

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

官方网站:/

中文说明可参考:/view-blog-219.html

如何使用bxSlider

1、首先是加载jQuery库,以及bxSlider插件文件和相关CSS文件,您可以从官方网站下载最新版本的bxSlider。

<link rel="stylesheet" type="text/css" href="jquery.bxslider.css">

<script src="///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="data:images/s1.jpg" /></li>

<li><img src="data:images/s2.jpg" /></li>

<li><img src="data:images/s3.jpg" /></li>

</ul>

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

$(function(){

$('.bxslider').bxSlider();

});

这样,一个超酷的内容滑动效果就实现了,查看演示demo,将浏览器窗口放大和缩小可以看到滑动内容会随着浏览器窗口自动调整大小。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的选项设置,请参照bxSlider官网:/options

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。