首页幻灯代码

请有仿华西都市网首页那个幻灯展示的代码，麻烦分享下！谢谢！如下图：

1.             <div id="frame4hPp66" class="cl_frame_bm frame move-span cl frame-1">
   
2.                 <div id="frame4hPp66_left" class="column frame-1-c">
   
3.                     <div id="frame4hPp66_left_temp" class="move-span temp"></div>
   
4.                     <div id="portal_block_1129" class="block move-span">
   
5.                         <div id="portal_block_1129_content" class="dxb_bc">
   
6.                             <style type="text/css">
   
7. 
   
8. .slideshow{position:relative;margin:5px 0 0 5px;width:270px;height:300px;}
   
9. 
   
10. .slideshow .slides{position:absolute;width:270px;height:300px;overflow:hidden;}
    
11. 
    
12. .slideshow .slides li img{width:270px;height:300px;}
    
13. 
    
14. .slideshow .slidenav{position:absolute; width:100%; bottom:2px; text-align:right; z-index:1000; display:none;}
    
15. 
    
16. .slideshow .slidenav li{display:inline;}
    
17. 
    
18. .slideshow .slidenav li a{display:inline-block; margin:3px; height:15px; line-height:15px; padding:2px 6px; text-align:center; color:#666; overflow:hidden; cursor:pointer; zoom:1; background:#fff; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; text-decoration:none;}
    
19. 
    
20. .slideshow .slidenav li.active a{background:#f00; color:#fff;}
    
21. 
    
22. .slideshow .slidetip{position:absolute; bottom:0; height:40x; left:0; font-weight:normal; color:#fff; overflow:hidden;}
    
23. 
    
24. .slideshow .slidetip .front{position:absolute; top:0; left:0; padding:5px 0 0; width:100%; line-height:20px; overflow:hidden; text-align:center; font-weight:bold; font-size:14px;}
    
25. 
    
26. .slideshow .slidetip .bg{position:absolute; top:0; left:0; width:100%; height:100%; background:#000; filter:alpha(opacity=50); opacity:0.5;}
    
27. 
    
28. .slideshow .slidetip a{color:#fff;}
    
29. 
    
30. .slidesmap { position: absolute; width: 280px; height: 60px; left:0px; bottom:-60px; _overflow:hidden; background:#E4E4E4; }/*缩略图*/
    
31. 
    
32. .slidesmap ul { width: 270px; margin:0; margin-left:2px; padding:0; }
    
33. 
    
34. .slidesmap li { width: 50px; float: left; height: 59px; margin-right:5px; filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4 }
    
35. 
    
36. .slidesmap li a { display: block; padding-top: 4px }
    
37. 
    
38. .slidesmap li img { width: 50px; height: 59px; }
    
39. 
    
40. .slidesmap li.active { filter: alpha(opacity=90); opacity: 0.9; -moz-opacity: 0.9 }
    
41. 
    
42. </style>
    
43.                             <div id="pic-slideshow" class="slideshow">
    
44.                                 <div class="slides">
    
45.                                     <ul>
    
46.                                         <li><a href="http://huaxi100.com/thread-112180-1-1.html" title="宽窄巷子的民族风情" target="_blank"><img loadnow="true" alt="宽窄巷子的民族风情" src="http://www.huaxi100.com/data/attachment/portal/201202/15/212022ppcqfr8hxhzrq6sr.png"></a></li>
    
47.                                         <li><a href="http://huaxi100.com/thread-112061-1-1.html" title="在中国最美火锅店过情人节" target="_blank"><img loadnow="true" alt="在中国最美火锅店过情人节" src="http://www.huaxi100.com/data/attachment/portal/201202/16/085510mfqpb4eb44fb3y3v.png"></a></li>
    
48.                                         <li><a href="http://huaxi100.com/thread-111794-1-1.html" title="梦幻郁金香" target="_blank"><img loadnow="true" alt="梦幻郁金香" src="http://www.huaxi100.com/data/attachment/portal/201202/15/232506zatlladot5bx6mhh.jpg"></a></li>
    
49.                                         <li><a href="http://huaxi100.com/thread-111804-1-1.html" title="Elie Saab 2012春夏定制 蕾丝控看过来" target="_blank"><img loadnow="true" alt="Elie Saab 2012春夏定制 蕾丝控看过来" src="http://www.huaxi100.com/data/attachment/portal/201202/16/091622o6yizg3ghg0igdgh.jpg"></a></li>
    
50.                                         <li><a href="http://huaxi100.com/thread-111879-1-1.html" title="行者 " target="_blank"><img loadnow="true" alt="行者 " src="http://www.huaxi100.com/data/attachment/portal/201202/15/232435uk1seu1r7111kkzs.jpg"></a></li>
    
51.                                     </ul>
    
52.                                 </div>
    
53.                                 <ul class="slidesmap">
    
54.                                     <li class="current"><a href="http://huaxi100.com/thread-112180-1-1.html" target="_blank"><img alt="宽窄巷子的民族风情" src="http://www.huaxi100.com/data/attachment/portal/201202/15/212022ppcqfr8hxhzrq6sr.png"></a></li>
    
55.                                     <li class="current"><a href="http://huaxi100.com/thread-112061-1-1.html" target="_blank"><img alt="在中国最美火锅店过情人节" src="http://www.huaxi100.com/data/attachment/portal/201202/16/085510mfqpb4eb44fb3y3v.png"></a></li>
    
56.                                     <li class="current"><a href="http://huaxi100.com/thread-111794-1-1.html" target="_blank"><img alt="梦幻郁金香" src="http://www.huaxi100.com/data/attachment/portal/201202/15/232506zatlladot5bx6mhh.jpg"></a></li>
    
57.                                     <li class="current"><a href="http://huaxi100.com/thread-111804-1-1.html" target="_blank"><img alt="Elie Saab 2012春夏定制 蕾丝控看过来" src="http://www.huaxi100.com/data/attachment/portal/201202/16/091622o6yizg3ghg0igdgh.jpg"></a></li>
    
58.                                     <li class="current"><a href="http://huaxi100.com/thread-111879-1-1.html" target="_blank"><img alt="行者 " src="http://www.huaxi100.com/data/attachment/portal/201202/15/232435uk1seu1r7111kkzs.jpg"></a></li>
    
59.                                 </ul>
    
60.                             </div>
    
61.                             <script type="text/javascript">
    
62. 
    
63. hx_slide_config = typeof hx_slide_config !== 'undefined' ? hx_slide_config : [];
    
64. 
    
65. hx_slide_config.push({
    
66. 
    
67.         'slide':'#pic-slideshow',
    
68. 
    
69.         'config': {
    
70. 
    
71.                 width: 270,
    
72. 
    
73.                 height: 300,
    
74. 
    
75.                 animate: 500,
    
76. 
    
77.                 trigger: 'mouseover',
    
78. 
    
79.                 map: '.slidesmap li',
    
80. 
    
81.                 maptrigger: 'mouseover',
    
82. 
    
83.                 showtitle : true
    
84. 
    
85.         }
    
86. 
    
87. });
    
88. 
    
89. </script>
    
90.                         </div>
    
91.                     </div>
    
92.                 </div>
    
93.             </div>

复制代码

哇·~还真有热心人

怎么变成模板代码啊

<div class="slides" style="overflow: hidden; width: 270px; height: 300px;">
    <ul style="width: 270px; height: 300px;">
    [index=1]<li style="display: list-item;"><a href="{url}"{target} title="{title}"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a></li>[/index]
    [loop]<li style="display:none"><a href="{url}"{target} title="{title}"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a></li>[/loop]
    </ul></div>
    <ul class="slidesmap">
    [index1=1]
    <li class="current active"><a href="{url}"{target} title="{title}"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a></li>[/index1]
    [loop1]
    <li class="current"><a href="{url}"{target} title="{title}"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a></li>[/loop1]
    </ul>