destoon如何弄三重循环显示的幻灯片

2018-03-08 158浏览
今天折腾了半天,做了一个标签,觉得对大家也许还是有用的,特分享一下。
目标:获取最新的18条产品信息。分三屏幻灯片显示,每屏幻灯片显示6条信息。6条信息又分每3条循环一次。
destoon如何弄三重循环显示的幻灯片
如图,做一个可以滚动的幻灯片。

HTML代码如下:

第一屏
<div class="scroll_list hidden">
<ul class="playing_list">
<li></li>
<li></li>
<li class="mno"></li>
</ul>
<ul class="playing_list">
<li></li>
<li></li>
<li class="mno"></li>
</ul>
</div>

第二屏
<div class="scroll_list">
<ul class="playing_list">
<li></li>
<li></li>
<li class="mno"></li>
</ul>
<ul class="playing_list">
<li></li>
<li></li>
<li class="mno"></li>
</ul>
</div>

第三屏
<div class="scroll_list">
<ul class="playing_list">
<li></li>
<li></li>
<li class="mno"></li>
</ul>
<ul class="playing_list">
<li></li>
<li></li>
<li class="mno"></li>
</ul>
</div>


标签:
页面模版调用

<!--{tag("moduleid=5&condition=status=3 and thumb<>''&pagesize=18&order=addtime desc&template=list-img")}-->

在网站模版文件夹里的tag文件夹里新建标签模版list-img

{loop $tags $k $t}
{if $k%6==0}<div class="scroll_list{if $k%18==0} hidden{/if}">{/if}
{if $k%3==0}<ul class="playing_list">{/if}
<li class="{if $k%3==2}mno{/if}">
<div class="pic"><a href="{$t[linkurl]}" target="_blank">
<img src=http://www.17jiaoliu.com/skin/default/image/nopic.gif 1)}" width="48" height="48" alt="{$t[alt]}" />
</a></div>
<div class="txt">
<p><a title="{$t[title]}" target="_blank" href="{$t[linkurl]}" class="f-f12">{dsubstr($t[title], 20, '')}</a></p>
</div>
</li>
{if $k%3==2} </ul>{/if}
{if $k%6==5} </div>{/if}
{/loop}

标签说明:

{if $k%6==0}<div class="scroll_list{if $k%18==0} hidden{/if}">{/if}
{if $k%6==0}意思是:从0开始每6条出现一次<div class="scroll_list">
{if $k%18==0} hidden{/if} 意思是:只在第一条出现一次。(hidden是幻灯片默认显示面,这个要与展示的信息条数符合,如我显示18条,所以取值18,如显示24条的,则要取值24.否则页面将错乱)

{if $k%3==0}<ul class="playing_list">{/if}
{if $k%3==0} 意思是:从0开始,每3条出现一次<ul class="playing_list">

<li class="{if $k%3==2}mno{/if}">
(class="mno" 的作用是尾部结束。CSS的效果)
{if $k%3==2}意思是,每3条显示一次。从第3条开始显示。(因为值是从0开始算的。所以第3条就等于2了)

{if $k%3==2} </ul>{/if}
{if $k%3==2}意思是:每3条出现一次,从开始的第3条开始计算。

{if $k%6==5} </div>{/if}
{if $k%6==5}意思是:每6条出现一次,从开始的第6条开始计算。

总结:%A的意思是每隔A条出现一次。==X意思是从信息的第X条开始出现(X这个数字要从0开始算,即0就是第1条,1就是第2条)