🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
首先列表页上的图片显示: ~~~ <volist name="post.content" id="pic"> <a rel="gallery-{$post_k}" href="{$pic.path}" class="swipebox pic"> <img src="{$pic.path}" alt="{$pic.alt}" width="617"> </a> </volist> ~~~ 然后 script block中引入资源和js绑定: ~~~ <block name="script"> <script type="text/javascript" src="__BOWER__/audiojs/audiojs/audio.min.js"></script> <script src="__STATIC__/swipebox/js/jquery.swipebox.js"></script> <link rel="stylesheet" href="__STATIC__/swipebox/css/swipebox.css"> <script type="text/javascript"> $(function(){ var single = audiojs; single.events.ready(function() { var a1 = single.createAll('', $('.single audio')); }); //图片灯箱 $( '.swipebox' ).swipebox(); }) </script> </block> ~~~ 这样,列表里图片文章中的多图就转换为幻灯片了。 ![2015-06-23/5588aa1ae5611](http://box.kancloud.cn/2015-06-23_5588aa1ae5611.png) 点击后: ![2015-06-23/5588aa35a256f](http://box.kancloud.cn/2015-06-23_5588aa35a256f.png) 方向键 <-、-> 左右切换上一张和下一章,ese退出。 方便欣赏多图。