<ul class='ul_demo'> <li>javascript完成，不需要jQuery库支持</li> <li>支持触屏手机端</li> <li>支持显示标题和说明等</li> <li>支持响应式效果</li> <li>支持CSS3过渡效果</li> <li>使用 SVG 按钮，没有多余的文件下载</li> <li>启用 gzip 压缩后仅 2KB</li> </ul>
![[php框架] Smarty基础商品教程 Smarty入门教程 Smarty框架教程 共10课](https://jy.tp.yuanmeng.life/uploads/images/20210319/f47dc487eb949895833cd962fddc6a8b.jpg)
附件
<div class="header large">
<ul class="nav">
<li><a class="cur" href="https://jy.tp.yuanmeng.life/" title="首页">首页</a></li>
<li><a href="https://jy.tp.yuanmeng.life/templates" title="模板">网站模板</a></li>
<li><a href="https://jy.tp.yuanmeng.life/js" title="网页特效">网页特效</a></li>
<li><a href="https://jy.tp.yuanmeng.life/psd" title="网站psd">网站psd</a></li>
</ul>
</div>引入jQuery库和baguetteBox相关插件
<script src="js/jquery.js"></script>
<script src="js/baguetteBox.js"></script>我们在页面上放置多个可点击的缩略图，并且在a标签上加上图片链接href属性和data-caption标题
<div class="baguetteBox">
<a href="img/1-1.jpg" data-caption="Golden Gate Bridge"><img src="img/thumbs/1-1.jpg"></a>
<a href="img/1-2.jpg" title="Midnight City"><img src="img/thumbs/1-2.jpg"></a>
......
</div>$(function(){
baguetteBox.run('.baguetteBox', {
//options
});
});| 参数 | 描述 | 默认值 |
| captions | 显示图片说明 | true |
| buttons | 显示按钮，可选 ‘auto’ / true / false | auto |
| async | 异步加载文件 | false |
| preload | 需要预加载图片的个数 | 2 |
| animation | 动画方式，可选 slideIn / fadeIn | slideIn |
*
回帖描述：*
链接类型：*
下载链接：
验证通过自动获取下载链接
*
描述：*
回帖描述：*
链接类型：*
阅读权限：*
下载链接：
微信客服
QQ客服
QQ群
