“bxSlIDer”就是一款响应式的幻灯片Js插件
bxSlIDer特性
充分响应各种设备,适应各种屏幕;
支持多种滑动模式,水平、垂直以及淡入淡出效果;
支持图片、视频以及任意HTML内容;
支持触摸滑动;
支持firefox,Chrome,Safari,iOS,AndroID,ie7+
bxSlIDer使用方法:
加载jquery库,加载bxSlIDer插件文件和相关CSS文件;
<!-- bxSlIDer CSS file --> <link href="jquery.bxslIDer.CSS" rel="stylesheet" /> <!-- jquery library --> <script src="jquery-3.1.1.min.Js"></script> <!-- bxSlIDer JavaScript file --> <script src="jquery.bxslIDer.Js"></script>VIEw Code
创建一个幻灯片区块:
<ul class="bxslIDer"> <li><img src="images/pic1.jpg" /></li> <li><img src="images/pic2.jpg" /></li> <li><img src="images/pic3.jpg" /></li> <li><img src="images/pic1.jpg" /></li> <li><img src="images/pic2.jpg" /></li> </ul>
加上bxSlIDer参数激活使用:
<script> $(document).ready(function() { $(‘.bxslIDer‘).bxSlIDer({ mode: ‘horizontal‘,moveSlIDes: 1,slIDemargin: 40,infiniteLoop: true,slIDeWIDth: 660,minSlIDes: 3,maxSlIDes: 3,speed: 800,}); }); </script>VIEw Code
bxSlIDer下载地址:官方下载
bxSlIDer下载地址:github下载
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所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)