织梦(dedecms)仿站课程第十一讲―幻灯片的制作 _Web前端

织梦(dedecms)仿站教程第十一讲―幻灯片的制作

我们还是顺着做吧，这一讲说说幻灯片代码的制作。

首先打开index.htm文档，找到幻灯片部分的代码。就是下面这段代码：

<DIV id=ifocus>
<DIV id=ifocus_pic>
<DIV style="TOP: 0px; LEFT: 0px" id=ifocus_piclist>
<UL>
<LI><A href="http://www.quanji.cn/news/1/6004.html" target=_blank><IMG src="{dede:global.cfg_templets_skin/}/images/8a99a2b421ca012bc0cd09a6afb3fbc6.jpg"></A> </LI>
<LI><A href="http://www.quanji.cn/news/1/5719.html" target=_blank><IMG src="{dede:global.cfg_templets_skin/}/images/3cdbd2277083179ced6ceb7d43b2a9b0.jpg"></A> </LI>
<LI><A href="http://www.quanji.cn/news/1/5717.html" target=_blank><IMG src="{dede:global.cfg_templets_skin/}/images/8f1290848b91947cd5da282100186889.jpg"></A> </LI>
</UL>
</DIV>
<DIV id=ifocus_opdiv></DIV>
<DIV id=ifocus_tx>
<UL>
<LI class=current1> <H1>梅威瑟VS奥提兹纽约召开新闻发布会</H1>28号早些时候，保持不败的P4P冠军弗罗伊德.梅威瑟与WBC次中量级冠军维克多.奥提兹在纽约城的胡德逊剧场召开了一场新闻发布会，正式宣布9月17日二人在拉斯维加斯米...
<LI class=normal> <H1>帕奎奥12回合点数完胜莫斯利(附视频)</H1>在刚刚结束的一场次中量级拳王争霸战中，“亚洲驱逐舰”帕奎奥十二回合点数完胜三个级别的五度世界拳王“糖块”莫斯利，一边倒的赢得了胜利。...
<LI class=normal> <H1>“幽灵”帕弗里克10回合点胜洛佩兹(附视频)</H1>　　刚刚在美国米高梅大酒店进行的一场10回合超中量级比赛中，前中量级冠军，美国“幽灵”凯利.帕弗里克（37-2，32KO）以点数95-95、98-92、99-91战胜...
</LI>
</UL>
</DIV>
</DIV>
<DIV id=ifocus_btn>
<UL>
<LI><A href="http://www.quanji.cn/news/1/6004.html" target=_blank><IMG alt=梅威瑟VS奥提兹纽约召开新闻发布会 src="{dede:global.cfg_templets_skin/}/images/small0a72185a177baff67a7d8f51309318211.jpg"></A> </LI>
<LI><A href="http://www.quanji.cn/news/1/5719.html" target=_blank><IMG alt=帕奎奥12回合点数完胜莫斯利(附视频) src="{dede:global.cfg_templets_skin/}/images/small3cdbd2277083179ced43b2a9b01304902616.jpg"></A> </LI>
<LI><A href="http://www.quanji.cn/news/1/5717.html" target=_blank><IMG alt=“幽灵”帕弗里克10回合点胜洛佩兹(附视频) src="{dede:global.cfg_templets_skin/}/images/small88d20203a724955448a75cc241304833918.jpg"></A> </LI>
</UL>
</DIV>
</DIV>

代码有些长，此段代码可分为三段，大图部分、标题和简介部分、小图部分。

我们将上面这段代码修改为织梦模板的代码：

<DIV id=ifocus>
<DIV id=ifocus_pic>
<DIV style="TOP: 0px; LEFT: 0px" id=ifocus_piclist>
<UL>
{dede:arclistflag='f' row='3'}
<LI><A href="[field:arcurl/]" target=_blank><IMG src="[field:litpic/]"></A> </LI>
{/dede:arclist}>
</UL>
</DIV>
<DIV id=ifocus_opdiv></DIV>
<DIV id=ifocus_tx>
<UL>
{dede:arclist flag='f' limit='0,1'}
<LI class=current1>
<H1>[field:title /]</H1>[field:infos /]
{/dede:arclist}
{dede:arclist flag='f' limit='1,2'}
<LI class=normal>
<H1>[field:title /]</H1>[field:infos /]
{/dede:arclist}>
</LI></UL></DIV></DIV>
<DIV id=ifocus_btn>
<UL>
{dede:arclist flag='f' row='3'}
<LI><A href="[field:arcurl/]" target=_blank><IMG alt=[field:title function='html2text(@me)'/] src="[field:litpic/]"></A> </LI>
{/dede:arclist}>
</UL>
</DIV>
</DIV>

保存后，查看前台效果：

代码解释参考http://help.dedecms.com/v53/archives/tag/global/arclist/

好了，幻灯片代码部分讲完了