分享一些天兴工作室认为有用的zblog插件、软件、程序给大家,希望能给大家带来帮助
在这个移动端渐渐占到很大比重的年代,响应式页面就非常的有必要了。之前的一些前端js插件在响应式下表现的都不那么尽如人意,因此也慢慢的出现了很多专门为移动端写的js插件。这个“bxSlider”就是一款响应式的幻灯片js插件。
bxSlider特性
充分响应各种设备,适应各种屏幕;
支持多种滑动模式,水平、垂直以及淡入淡出效果;
支持图片、视频以及任意html内容;
支持触摸滑动;
支持Firefox,Chrome,Safari,iOS,Android,IE7+
bxSlider使用方法:
加载jQuery库,加载bxSlider插件文件和相关CSS文件;
创建一个幻灯片区块:
<ul class="bxslider"> <li><img src="images/img1.jpg" /></li> <li><img src="images/img2.jpg" /></li> <li><img src="images/img3.jpg" /></li> </ul>
加上bxSlider参数激活使用:
<script type="text/javascript">$(document).ready(function(){$('.bxslider').bxSlider({auto: true,autoControls: true});});</script>
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下载 bxSlider参数
售价:免费 82126 ℃ 4 评论
售价:免费 82126 ℃ 4 评论
售价:免费 82126 ℃ 4 评论
已有 1 位小伙伴发表了看法
回应ta 淘小众 (游客)
评论于 2016-12-05 23:49:20
欢迎 你 发表评论