1、首先引入jQuery.js，bxSlider.js和bxSlider.css。
![[php框架] Smarty基础商品教程 Smarty入门教程 Smarty框架教程 共10课](https://jy.tp.yuanmeng.life/uploads/images/20210319/f47dc487eb949895833cd962fddc6a8b.jpg)
附件
<link rel="stylesheet" type="text/css" href="jquery.bxslider.css">
<script src="jquery.js"></script>
<script src="jquery.bxslider.min.js"></script>2、我们创建一个ul.bxslider，让子元素li中加入滑动内容，滑动内容可以是图片、视频或任意html内容：
<ul class="bxslider">
<li><img src="images/pic1.jpg" /></li>
<li><img src="images/pic2.jpg" /></li>
<li><img src="images/pic3.jpg" /></li>
</ul>3、调用bxSlider很简单.代码如下：
$(function(){
$('.bxslider').bxSlider();
});演示文件里提供了4个demo，主题分别为<a href="../jquery/demo/16/index.html" target='_blank'>演示1:标准</a> <a href="../jquery/demo/16/index2.html" target='_blank'>演示2：带标题的图片滑动</a> <a href="../jquery/demo/16/index3.html" target='_blank'>演示3：自动滑动控制</a><a href="../jquery/demo/16/index4.html" target='_blank'>演示4：垂直滑动</a>。
bxSlider参数设置
| 参数 | 描述 | 默认值 |
| mode | 滑动三种模式：'horizontal':水平、'vertical':垂直及'fade':淡入淡出 | horizontal |
| speed | 内容切换速度(ms) | 500 |
| startSlide | 初始滑动位置 | 0 |
| randomStart | 是否开启随机初始滑动位置 | true |
| infiniteLoop | 循环滑动，若为true，则到最后滑动位置时会切换到初始位置 | true |
| easing | 切换动画扩展效果 | null |
| captions | 是否显示图片标题，当滑动内容为图片时并设置属性title，就会显示图片标题 | false |
| video | 支持视频，当设置为true时，必须要引入jquery.fitvids.js | false |
| pager | 是否显示分页，当为true时，会在滑动内容下方显示分页条 | true |
| controls | 是否显示上一组和下一组控制按钮 | true |
| auto | 是否自动滑动 | false |
| pause | 自动滑动停留时间(ms) | 4000 |
| autoHover | 鼠标滑到内容上时，是否暂停滑动 | false |
*
回帖描述：*
链接类型：*
下载链接：
验证通过自动获取下载链接
*
描述：*
回帖描述：*
链接类型：*
阅读权限：*
下载链接：
微信客服
QQ客服
QQ群
