页面的head部分，需引入一个必要的CSS样式文件，代码如下：
![[php框架] Smarty基础商品教程 Smarty入门教程 Smarty框架教程 共10课](https://jy.tp.yuanmeng.life/uploads/images/20210319/f47dc487eb949895833cd962fddc6a8b.jpg)
附件
<link type="text/css" rel="stylesheet" href="css/shutter.css">页面的body部分，用了指定样式的div作为容器放入多个a标签的图片链接，下面接着用一个ul无序列表放切换按钮，代码如下：
<div class="shutter">
<div class="shutter-img">
<a href="#" data-shutter-title="超人"><img src="images/shutter_2.jpg" alt="#"></a>
<a href="#" data-shutter-title="浩克"><img src="images/shutter_3.jpg" alt="#"></a>
<a href="#" data-shutter-title="钢铁侠"><img src="images/shutter_1.jpg" alt="#"></a>
</div>
<ul class="shutter-btn">
<li class="prev"></li>
<li class="next"></li>
</ul>
<div class="shutter-desc">
<p>钢铁侠</p>
</div>
</div>页面的底部，去引入jQuery库和两个必要的JS文件，并启用插件设置好相应参数，代码如下：
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/velocity.js"></script>
<script type="text/javascript" src="js/shutter.js"></script>
<script type="text/javascript">
$(function () {
$('.shutter').shutter({
shutterW: 1000, // 容器宽度
shutterH: 358, // 容器高度
isAutoPlay: true, // 是否自动播放
playInterval: 3000, // 自动播放时间
curDisplay: 3, // 当前显示页
fullPage: false // 是否全屏展示
});
});
</script>*
回帖描述：*
链接类型：*
下载链接：
验证通过自动获取下载链接
*
描述：*
回帖描述：*
链接类型：*
阅读权限：*
下载链接：
微信客服
QQ客服
QQ群
