页面模板内容
<script language="javascript"> var nn; nn=1; setTimeout('change_img()',2000); function change_img() { if(nn>3) nn=1 setTimeout('setFocus1('+nn+')',5000); nn++; tt=setTimeout('change_img()',5000); } function setFocus1(i) { selectLayer1(i); } function selectLayer1(i) { switch(i) { case 1: document.getElementById("focusPic1").style.display="block"; document.getElementById("focusPic2").style.display="none"; document.getElementById("focusPic3").style.display="none"; break; case 2: document.getElementById("focusPic1").style.display="none"; document.getElementById("focusPic2").style.display="block"; document.getElementById("focusPic3").style.display="none"; break; case 3: document.getElementById("focusPic1").style.display="none"; document.getElementById("focusPic2").style.display="none"; document.getElementById("focusPic3").style.display="block"; break; } } </script> <div id="focusPic"> <div class="focusPic"> [!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--] </div> </div>
列表内容模板 (list.var)
<div id="focusPic[!--no.num--]"> <div class="pic"><a href="[!--titleurl--]"><img src="[!--titlepic--]" alt="[!--oldtitle--]" width="360" height="200" /></a></div> <h1><a href="[!--titleurl--]">[!--title--]</a></h1> <div class="text">[!--smalltext--]... <a href="[!--news.url--]e/pl?classid=[!--classid--]&id=[!--id--]" class="font-f60">我要评论>></a></div> <div class="textNum"> <ul class="bg[!--no.num--]"> <li><a href="javascript:setFocus1(1);" target="_self">1</a></li><li><a href="javascript:setFocus1(2);" target="_self">2</a></li><li><a href="javascript:setFocus1(3);" target="_self">3</a></li> </ul> </div> <div class="clear"></div> </div>
在你的CSS里加上下面的样式。。。 /*- 焦点图片部分 --------------------------- */ #focusPic { word-break:break-all; margin: 0 0 6px; height: 296px; overflow: hidden; background: #FFFFFF; } #focusPic1, #focusPic2, #focusPic3 { margin: 0 0 10px; } .focusPic .pic { overflow: hidden; } .focusPic .text { height: 42px; margin: 0; padding: 0; } .textNum { text-align: right; } .textNum ul { padding: 0px; margin: 0px; } .textNum .bg1 { background: url(num1.gif) no-repeat right top; width: 90px; } .textNum .bg2 { background: url(num2.gif) no-repeat right top; width: 90px; } .textNum .bg3 { background: url(num3.gif) no-repeat right top; width: 90px; } .textNum .bg4 { background: url(num4.gif) no-repeat right top; width: 90px; } .focusPic .textNum li { display: block; background: none; font-weight: bold; float: left; width: 28px; color: #fff; list-style-type: none; text-align:center; padding: 0px; margin: 1px 0 0; font-size: 11px; } .textNum li a { color: #fff; padding: 0px 3px; } .textNum li a:visited { color: #fff; } .textNum li a:hover { color: #ff0; } #focusPic h1 { font-size:18px; padding:4px 0px 0; margin:0px; } #focusPic h1 a{ color:#f60; } #focusPic h1 a:hover{ color:#f60; text-decoration: underline; }
|