帝國CMS一個不錯的頭條效果的標簽
http://www.hz8851.com | 時間：2010-05-24 | 關注人次[10118] | 字體設置:
大中小-
說明:默認的是三個圖片切換,在用萬能標簽調(diào)用的時候,數(shù)目要填3,如果需要增加圖片數(shù)量,需要修改標簽里的
" if(nn>3) nn=1"和
"function selectLayer1(i)
{
switch(i)
{
這個地方,背景圖片如果不是與CSS文件放在同一目錄下,需要修改路徑
/*---------------- 頁面模板內(nèi)容 -----------*/
<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>
/*---------------- 列表內(nèi)容模板(list.var) -----------*/
<div id="focusPic[!--no.num--]">
<div class="pic"><a ><img src="[!--titlepic--]" alt="[!--oldtitle--]" width="360" height="200" /></a></div>
<h1><a >[!--title--]</a></h1>
<div class="text">[!--smalltext--]... <a 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;
}
.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;
}
