页面部分:
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop" id="photo">
<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
{foreach $carousel as $key=>$ca}
{if $key+1 === $count}
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="{$ca.photo}">
</a>
</div>
{/if}
{/foreach}
{foreach $carousel as $key=>$ca}
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="{$ca.photo}">
</a>
</div>
{/foreach}
<!-- 第二张 -->
{foreach $carousel as $key=>$ca}
{if $key == 0}
<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="{$ca.photo}">
</a>
</div>
{/if}
{/foreach}
</div>
</div>
实现轮播的无缝连接,这里需要三个节点,第一个节点是轮播的最后一张图,最后一个节点是轮播的第一张图,然后中间节点遍历数组中所有的数据