QQ登录 - 设为首页 - 加入收藏 - 网站地图 木易瓶子屋!第一时间了解互联网开发技术新鲜事儿!

亲!来点一下试试嘛。。。

木易瓶子屋每日新鲜技术平台 第一时间了解互联网的那些事儿

响应式内容滑动插件bxSlider

作者:木易瓶子┆ 分类:前端技术┆时间:2015-01-05┆点击: 55次┆tags: 响应式滑动插件bxSlider

响应式WEB设计可以让WEB页面自适应各种尺寸的屏幕,俨然已经成为了当今WEB设计趋势。本文将介绍一款基于jQuery的响应式内容滑动插件以及如何使用这款插件到你的WEB应用中,满足各类WEB设计需求。


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();

});

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

bxSlider选项设置

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

参数 描述 默认值
mode 设置滑动模式,'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出 horizontal
speed 内容切换速度,数字,ms 500
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 自动滑动时停留时间,数字,ms 4000
autoHover 当鼠标滑向滑动内容上时,是否暂停滑动 false

更多bxSlider的选项设置,请参照bxSlider官网: http://bxslider.com/options


欢迎转载但请注明出处及链接,商业媒体使用请联系编辑(QQ 363630845)。
响应式,滑动插件,bxSlider
正在加载中……