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

响应式内容滑动插件bxSlider

时间:2019-07-10 02:22:49

相关推荐

响应式内容滑动插件bxSlider

bxSlider特性

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

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

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

4.支持触摸滑动;

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

如何使用bxSlider

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

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

<scriptsrc="///ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<scriptsrc="jquery.bxslider.min.js"></script>

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

<ulclass="bxslider">

<li><imgsrc="images/s1.jpg"/></li>

<li><imgsrc="images/s2.jpg"/></li>

<li><imgsrc="images/s3.jpg"/></li>

</ul>

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

$(function(){

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

});

bxSlider选项设置

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

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

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