destoon三重循环显示的幻灯片

最新推荐文章于 2021-03-21 09:49:27 发布

原创最新推荐文章于 2021-03-21 09:49:27 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#destoon #标签

destoon 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用HTML代码实现滚动幻灯片展示最新产品的功能，包括模板调用、标签创建及关键代码解析。

今天折腾了半天，做了一个标签，觉得对大家也许还是有用的，特分享一下。

目标：获取最新的18条产品信息。分三屏幻灯片显示，每屏幻灯片显示6条信息。6条信息又分每3条循环一次。

如图，做一个可以滚动的幻灯片。

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文件夹里新建标签模版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="{imgurl($t[thumb], 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条）