大佬教程收集整理的这篇文章主要介绍了轮播图-bxslider，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
bxSlider特性
充分响应各种设备，适应各种屏幕；
支持触摸滑动；
支持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>
<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>
bxSlider具体参数：
| 参数 | 描述 | 默认值 |
|---|---|---|
| 设置滑动模式，‘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所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。