分享一款漂亮的幻灯片 代码
演示效果：
整体效果可以到网站查看 www zzhunjia com
代码如下：
<div class="flash_ind">
<div style="margin:6px"><style>
.div_jflash {width:304px; height:310px; margin:0px; display:inline; float:left; position:relative; overflow:hidden;}
.div_jimg {width:304px; height:228px; margin:0px auto 0px auto; text-align:center;}
.div_jimg #a_jimg {width:304px; height:228px; display:block; margin:0px auto;}
.div_jimg #bigimg {width:304px; height:228px; margin:0px; padding:0px;}
.div_jimg .ul_jimg {padding:0px; display:inline; float:left; overflow:hidden; zoom:1; margin:0px; list-style:none; width:100%;}
.div_jimg .ul_jimg li {display:inline; float:left; margin:10px 3px 0px 0px; width:72px; height:84px; background:url(page_01.gif) no-repeat center bottom; cursor:pointer;}
.div_jimg .ul_jimg li img {width:62px; height:47px; padding:1px; border:#FBDBE9 1px solid;}
.div_jimg .ul_jimg .on img {border:#FD2E5A 3px solid; width:62px; height:47px;}
.div_jtt {position:absolute; top:204px; left:0px; width:304px; text-align:center; height:24px; padding-top:0px; background:#FD0C60; filter:alpha(opacity=60); -moz-opacity:0.6; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-break:break-all;}
.div_jtt a {font-weight:100; font-size:12px; color:#fff; line-height:24px}
img{border:0px;}
</style>
<table id="pictable" style="DISPLAY: none">
<!---->
[e:loop={2,4,0,1}]
<tr>
<td><img src="<?=$bqr[titlepic]?>" border="0"/></td>
<td><?=$bqr[title]?></td>
<td><?=$bqsr[titleurl]?></td>
</tr>
[/e:loop]
<!---->
</table>
<div class="div_jflash"><SCRIPT LANGUAGE="JavaScript">
<!--
var currslid = 0;
var slidint;
function setfoc(id){
document.getElementById("bigimg").src = picarry[id];
document.getElementById("a_jimg").href = lnkarry[id];
document.getElementById("div_jtt").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>';
if (id==4) {
document.getElementById("a_jimg").style.background = 'url('+picarry[0]+')';
}
else {
document.getElementById("a_jimg").style.background = 'url('+picarry[id+1]+')';
}
currslid = id;
for(i=0;i<4;i++){
document.getElementById("li_jimg"+i).className = "li_jimg";
};
document.getElementById("li_jimg"+id).className ="li_jimg on";
var borserInfo=navigator.userAgent.toLowerCase();
if(/msie/.test(borserInfo))
{
document.getElementById("bigimg").style.visibility = "hidden";
document.getElementById("bigimg").filters[0].Apply();
document.getElementById("bigimg").filters[0].transition=23;
if (document.getElementById("bigimg").style.visibility == "visible") {
document.getElementById("bigimg").style.visibility = "hidden";
}
else {
document.getElementById("bigimg").style.visibility = "visible";
}
document.getElementById("bigimg").filters[0].Play();
}
stopit();
}
function playnext(){
if(currslid==3){
currslid = 0;
}
else{
currslid++;
};
setfoc(currslid);
playit();
}
function playit(){
slidint = setTimeout(playnext,2000);
}
function stopit(){
clearTimeout(slidint);
}
window.onload = function(){
playit();
}
function playit01(){
document.getElementById("playStop").className = "stop";
playit();
}
function stopit01(){
document.getElementById("playStop").className = "play";
stopit();
}
var picarry = {};
var lnkarry = {};
var ttlarry = {};
function FixCode(str){
return str.replace("'","=");
}
var bigtable=document.getElementById("pictable");
var rl=bigtable.rows.length;
var txt="";
for(var i=0;i<rl;i++){
picarry[i]=bigtable.rows[i].cells[0].childNodes[0].src;
lnkarry[i]=bigtable.rows[i].cells[2].innerHTML;
lnkarry[i] = lnkarry[i].replace(/&/g, "&");
ttlarry[i]=FixCode(bigtable.rows[i].cells[1].innerHTML);
}
document.write("<div class='div_jimg'><a class='a_jimg' id='a_jimg' href='"+lnkarry[0]+"' title='' style='background:url("+picarry[1]+")' target='_blank'><img id='bigimg' style='filter:RevealTrans (duration='1',transition='23'); visibility:visible;' alt='' src='"+picarry[0]+"'></a><ul class='ul_jimg'><li class='li_jimg on' id='li_jimg0' onmouseover='setfoc(0)' onmouseout='playit()'><a href='"+lnkarry[0]+"' target='_blank' class='img'><img src='"+picarry[0]+"'></a></li><li class='li_jimg' id='li_jimg1' onmouseover='setfoc(1)' onmouseout='playit()'><a href='"+lnkarry[1]+"' target='_blank' class='img'><img src='"+picarry[1]+"'></a></li><li class='li_jimg' id='li_jimg2' onmouseover='setfoc(2)' onmouseout='playit()'><a href='"+lnkarry[2]+"' target='_blank' class='img'><img src='"+picarry[2]+"'></a></li><li class='li_jimg' id='li_jimg3' onmouseover='setfoc(3)' onmouseout='playit()'><a href='"+lnkarry[3]+"' target='_blank' class='img'><img src='"+picarry[3]+"'></a></li></ul></div><div class='div_jtt' id='div_jtt'><a href='"+lnkarry[0]+"' target='_blank'>"+ttlarry[0]+"</a></div>");
document.close();
-->
</script>
</div></div>
</div> |
补充下使用方法，懂的人就不用看了 很简单
代码里边的 [e:loop={2,4,0,1}] 调用目标栏目参数
===================================
登录后台--公共模板变量--管理模板变量--增加模版变量
变量名(*) 填写 huandengpian
所属类别 默认
变量标识(*) 幻灯片
变量值(*) 贴进去上边代码 然后保存
=========================================
然后把 [!--temp.huandengpian--] 加入你首页模版调用即可
|
顶部 
加入收藏夹
2012-09-19 12:08:37 
已设置保密
回复
引用
报告
编辑
删除