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

    发布时间:2018-03-08

    574

    阅读量

    今天折腾了半天,做了一个标签,觉得对大家也许还是有用的,特分享一下。
    目标:获取最新的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条)