天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制 | RSS订阅 | 网站地图 | 联系我们
天兴工作室自用主题2015版上架销售
当前位置:网站首页 资源 正文
内容加载中......

在这个移动端渐渐占到很大比重的年代,响应式页面就非常的有必要了。之前的一些前端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参数

本文地址http://www.txcstx.cn/post/880.html

版权说明:如非注明,本站文章均为 天兴工作室 原创,转载请注明出处和附带本文链接。

我猜你还喜欢这些...

额!本文竟然没有沙发!你愿意来坐坐吗?

欢迎 发表评论

必填

选填

选填

必填

◎欢迎在这里交流反馈,垃圾评论会秒删的额...

联系我们
最新评论
标签云
zblogphp企业模板移动3G乐享3Gzblog商城zblogphp文章列表蘑菇手机zblog2.0模板春季返城中兴U202XML-RPC协议地址zblogphp1.3寒假校园营销Gravatar头像不显示404页面沃派zblog热门文章7元智慧包合家欢包年主机优惠扒皮天翼wifi翼加油老家前端之路返回顶部子分类列表网易博客过滤分类话务包大牛辅助天翼套餐资费天翼武汉通校园WLANdedecms主题演示qq互联
热门模板