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

2013-01-26 12:16 151人阅读 评论(0) 收藏 举报

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

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

1. <DIV id=ifocus>   
2. <DIV id=ifocus_pic>   
3. <DIV style="TOP: 0px; LEFT: 0px" id=ifocus_piclist>   
4. <UL>   
5. <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>   
6. <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>   
7. <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>   
8. </UL>   
9. </DIV>   
10. <DIV id=ifocus_opdiv></DIV> 
11. <DIV id=ifocus_tx>   
12. <UL>   
13. <LI class=current1> <H1>梅威瑟VS奥提兹纽约召开新闻发布会</H1>28号早些时候，保持不败的P4P冠军弗罗伊德.梅威瑟与WBC次中量级冠军维克多.奥提兹在纽约城的胡德逊剧场召开了一场新闻发布会，正式宣布9月17日二人在拉斯维加斯米...   
14. <LI class=normal> <H1>帕奎奥12回合点数完胜莫斯利(附视频)</H1>在刚刚结束的一场次中量级拳王争霸战中，“亚洲驱逐舰”帕奎奥十二回合点数完胜三个级别的五度世界拳王“糖块”莫斯利，一边倒的赢得了胜利。...   
15. <LI class=normal> <H1>“幽灵”帕弗里克10回合点胜洛佩兹(附视频)</H1>　　刚刚在美国米高梅大酒店进行的一场10回合超中量级比赛中，前中量级冠军，美国“幽灵”凯利.帕弗里克（37-2，32KO）以点数95-95、98-92、99-91战胜...   
16. </LI> 
17. </UL> 
18. </DIV> 
19. </DIV>   
20. <DIV id=ifocus_btn>   
21. <UL>   
22. <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>   
23. <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>   
24. <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>   
25. </UL>   
26. </DIV> 
27. </DIV> 

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

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

1.  <DIV id=ifocus>   
2. <DIV id=ifocus_pic>   
3. <DIV style="TOP: 0px; LEFT: 0px" id=ifocus_piclist>   
4. <UL>   
5. {dede:arclistflag='f' row='3'}   
6. <LI><A href="[field:arcurl/]" target=_blank><IMG src="[field:litpic/]"></A> </LI>   
7. {/dede:arclist}>   
8. </UL>   
9. </DIV>   
10. <DIV id=ifocus_opdiv></DIV>   
11. <DIV id=ifocus_tx>   
12. <UL>   
13. {dede:arclist flag='f' limit='0,1'}   
14. <LI class=current1>   
15. <H1>[field:title /]</H1>[field:infos /]   
16. {/dede:arclist}   
17. {dede:arclist flag='f' limit='1,2'}   
18. <LI class=normal>   
19. <H1>[field:title /]</H1>[field:infos /]   
20. {/dede:arclist}>   
21. </LI></UL></DIV></DIV>   
22. <DIV id=ifocus_btn>   
23. <UL>   
24. {dede:arclist flag='f' row='3'}   
25. <LI><A href="[field:arcurl/]" target=_blank><IMG alt=[field:title function='html2text(@me)'/] src="[field:litpic/]"></A> </LI>   
26. {/dede:arclist}>   
27. </UL>   
28. </DIV>   
29. </DIV> 

保存后，查看前台效果：

 

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

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