HTML
首先我们放置多张图片：
![[php框架] Smarty基础商品教程 Smarty入门教程 Smarty框架教程 共10课](https://jy.tp.yuanmeng.life/uploads/images/20210319/f47dc487eb949895833cd962fddc6a8b.jpg)
附件
<div id="slider" class="nivoSlider">
<img src="images/s1.jpg" alt="" title="非常可爱的狗狗..." />
<a href="https://jy.tp.yuanmeng.life/">
<img src="images/s2.jpg" alt="智慧小屋" title="智慧小屋" />
</a>
<img src="images/s3.jpg" alt="" title="#htmlcaption" />
</div>接着我们引用jQuery和nivoSlider插件：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>jQuery
调用nivoSlider插件非常简单：
$(function() {
$('#slider').nivoSlider();
});nivoSlider相关参数：
参数 描述 默认值 effect 丰富的图片切换效果。：'sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft', 'sliceUpDown','sliceUpDownLeft', 'fold','fade','slideInRight','slideInLeft'，诸如渐入渐出，滑动，百叶窗等等都有。 random animSpeed 图片切换速度（毫秒） 500 pauseTime 图片停留时间（毫秒） 3000 startSlide 开始切换的位置（即从第几张图开始切换）。 0 directionNav 是否使用左右按钮导航 true directionNavHide 是否当鼠标滑上图片时出现左右导航按钮 true controlNav 是否使用导航控制条，即显示每张图片的按钮 true controlNavThumbs 是否使用缩略图控制导航 false controlNavThumbsFromRel 是否使用图片的rel属性关联缩略图 false controlNavThumbsSearch 缩略图类型 '.jpg' controlNavThumbsReplace 缩略图后缀 '_thumb.jpg' keyboardNav 是否支持键盘方向键切换（貌视IE不支持） true pauseOnHover 当鼠标滑向图片时，停止切换 true manualAdvance 是否不自动切换，当为true时，需要手动切换 false captionOpacity 设置图片标题说明的背景透明度 0.8 方法：beforeChange 当发生切换前，回调函数 - 方法：afterChange 当发生切换后，回调函数 - 方法：slideshowEnd 完成所有的切换动作后，回调函数 - 方法：lastSlide 切换最后一张图片时，回调函数 - 方法：afterLoad 当加载完成时，回调函数 -*
回帖描述：*
链接类型：*
下载链接：
验证通过自动获取下载链接
*
描述：*
回帖描述：*
链接类型：*
阅读权限：*
下载链接：
微信客服
QQ客服
QQ群
