-
说明:默认的是三个图片切换,在用万能标签调用的时候,数目要填3,如果需要增加图片数量,需要修改标签里的
" if(nn>3) nn=1"和
"function selectLayer1(i)
{
switch(i)
{
这个地方,背景图片如果不是与CSS文件放在同一目录下,需要修改路径
/*---------------- 页面模板内容 -----------*/
<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="http://www./jzjc/coms/934.html"><img src="[!--titlepic--]" alt="[!--oldtitle--]" width="360" height="200" /></a></div>
<h1><a href="http://www./jzjc/coms/934.html">[!--title--]</a></h1>
<div class="text">[!--smalltext--]... <a href="http://www./e/pl?classid=64&id=934" 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;
}
