页面模板内容
<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;
}
|
帝国论坛 → 帝国网站管理系统交流区 → 模板/标签/插件共享交流 → 一个不错的头条效果的标签
顶部 
加入收藏夹
2006-07-04 19:28:45 
已设置保密
回复
引用
报告
编辑
删除
