此回复为自动发出,仅用于显示而已,并无任何其他特殊作用
楼主【wtcsy】截止到2008-06-26 22:20:03的历史汇总数据(不包括此帖):
发帖数:12 发帖分:270
结贴数:9 结贴分:200
未结数:3 未结分:70
结贴率:75.00 % 结分率:74.07 %
楼主加油
楼主【wtcsy】截止到2008-06-26 22:20:03的历史汇总数据(不包括此帖):
发帖数:12 发帖分:270
结贴数:9 结贴分:200
未结数:3 未结分:70
结贴率:75.00 % 结分率:74.07 %
楼主加油
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 图片切换效果</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="梁超">
<style type='text/css'>
.bigon{background:url(http://mat1.qq.com/ent/ent2007/ent2-04.gif);color:#C9000E;}
.bigoff{background:url(http://mat1.qq.com/ent/ent2007/ent2-03.gif);color:#3C3C3C;}
</style></HEAD><BODY>
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="344">
<table width="332" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td width="330" style="border:1px solid #4F4F4F;"><div id="fc" style="width:328px;height:240px;filter:progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 );"><div style="display:block;">
<a href="http://ent.qq.com/a/20080618/000007.htm" target="_blank"><img src="http://mat1.qq.com/ent/upday2008/06182.jpg" width="328" height="240" border="0" onMouseOver="ClearTime();" onMouseOut="ImgChange()" /></a></div>
<div style="display:none;">
<a href="http://ent.qq.com/a/20080618/000104.htm" target="_blank"><img src="http://mat1.qq.com/ent/upday2008/06188.jpg" width="328" height="240" border="0" onMouseOver="ClearTime();" onMouseOut="ImgChange()" /></a></div>
<div style="display:none;"><a href="http://ent.qq.com/a/20080618/000002.htm" target="_blank"><img src="http://mat1.qq.com/ent/upday2008/06184.jpg" width="328" height="240" border="0" onMouseOver="ClearTime();" onMouseOut="ImgChange()" /></a></div><div style="display:none;">
<a href="http://ent.qq.com/a/20080618/000048.htm" target="_blank"><img src="http://mat1.qq.com/ent/upday2008/06187.jpg" width="328" height="240" border="0" onMouseOver="ClearTime();" onMouseOut="ImgChange()" /></a></div><div style="display:none;">
<a href="http://ent.qq.com/a/20080618/000109.htm" target="_blank"><img src="http://mat1.qq.com/ent/upday2008/06186.jpg" width="328" height="240" border="0" onMouseOver="ClearTime();" onMouseOut="ImgChange()" /></a></div>
</div>
</td>
</tr>
<tr>
<td height="31" background="http://mat1.qq.com/ent/ent2007/ent2-02.gif"><table width="328" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="228" align="center" onmouseover="ClearTime();" onMouseOut="ImgChange()"><div id="con"><div style="display:block;">
<a href="http://ent.qq.com/a/20080618/000007.htm" target="_blank" class="bla">关之琳穿花裙高调亮相 灿烂醉笑日渐显老</a></div>
<div style="display:none;">
<a href="http://ent.qq.com/a/20080618/000104.htm" target="_blank" class="bla">《嫂嫂19岁》导演李昌汉要在内地选女主角</a></div>
<div style="display:none;">
<a href="http://ent.qq.com/a/20080618/000002.htm" target="_blank" class="bla">《剑蝶》迟到引不满 吴尊阿sa感情甚好</a></div>
<div style="display:none;">
<a href="http://ent.qq.com/a/20080618/000048.htm" target="_blank" class="bla">成龙与儿子合作 拳打脚踢为《熊猫》配音</a></div>
<div style="display:none;">
<a href="http://ent.qq.com/a/20080618/000109.htm" target="_blank" class="bla">林嘉欣踏入三十岁 希望早点结婚生孩子</a></div>
</div></td>
<td width="100"><table width="83" border="0" align="center" cellpadding="0" cellspacing="3" class="lhn" id="num">
<tr>
<td width="13" height="19" align="center" background="http://mat1.qq.com/ent/ent2007/ent2-04.gif" class="bigon" onclick="ChangeStart(0);" onmouseover="ClearTime();" onmouseout="ImgChange()" style="cursor:pointer;">1</td>
<td width="13" align="center" background="http://mat1.qq.com/ent/ent2007/ent2-03.gif" class="bigoff" onclick="ChangeStart(1);" onmouseover="ClearTime();" onmouseout="ImgChange()" style="cursor:pointer;">2</td>
<td width="13" align="center" background="http://mat1.qq.com/ent/ent2007/ent2-03.gif" class="bigoff" onclick="ChangeStart(2);" onmouseover="ClearTime();" onmouseout="ImgChange()" style="cursor:pointer;">3</td>
<td width="13" align="center" background="http://mat1.qq.com/ent/ent2007/ent2-03.gif" class="bigoff" onclick="ChangeStart(3);" onmouseover="ClearTime();" onmouseout="ImgChange()" style="cursor:pointer;">4</td>
<td width="13" align="center" background="http://mat1.qq.com/ent/ent2007/ent2-03.gif" class="bigoff" onclick="ChangeStart(4);" onmouseover="ClearTime();" onmouseout="ImgChange()" style="cursor:pointer;">5</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*
作品:图片切换效果
主要应用:filter:progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 )
作者:梁 超 2008
*/
var n = 0;
var Timer = null;
var oBackImg = document.getElementById('num');//初始化函数
function InitParm(){
n++;
if(n>4)n=0;
ChangeStart(n);
}
function ChangeStart(n){
ImgSel(n);//图片切换
LinkChange(n);//超链接切换
BackImg(n);//小图片背景切换
}
// 定时图片切换
function ImgSel(num){
with(fc){
filters[0].Apply();//初始化滤镜
for(var i = 0;i < 5; i++) (i == num) ? (childNodes[i].style.display = "block") : (childNodes[i].style.display = "none");
filters[0].play();//滤镜使用
}
}// 定时超链接切换
function LinkChange(num){
with(con){
for(var i = 0;i < 5; i++) i == num?childNodes[i].style.display = "block":childNodes[i].style.display = "none";
}
}
// 定时小背景图片切换
function BackImg(len){
for(var i=0;i<5;i++)
if(len==i){
oBackImg.getElementsByTagName("td")[i].className='bigon';
}
else{
oBackImg.getElementsByTagName("td")[i].className='bigoff';
}
}//清除定时器
function ClearTime(){
clearInterval(Timer);
}function ImgChange(){
Timer = window.setInterval("InitParm()",3000);
}ImgChange();// 特别应用:图片转换滤镜的应用
//-->
</SCRIPT>
</BODY>
</HTML>
我以前写的 看看
收藏了
可我还是想自己写一个的
看看那个点击后会在一个图片上无限循环是为什么了?
在就是第一张图片消失的时候
第2张图片渐渐出来 是用2个重叠的div做吗?
还是怎么做比较好列? 指教了!!! 敬爱的大虾门! -_-!!!
<style type="text/css">
.w{
float:left;
width:10px;
height:5px;
background-color:#CCCCCC;
margin-left:10px;
margin-right:10px;
cursor:hand;
} </style>
<script language="javascript">
var imageurl = new Array()
imageurl[0]="http://mobilesun.com.cn/product.asp?id=5/images/slx_02.gif";
imageurl[1]="2.jpg";
imageurl[2]="3.jpg";
var i_ap=100;
var i_xunhuan=0;
var a =0;
function an(n){
i_xunhuan=n;
i_ap=100;
showimage();
} function showimage(){
if(i_ap <=110)
{
heihei.innerHTML=" <img style='filter:alpha(opacity="+i_ap+")' src='"+imageurl[i_xunhuan]+"'>";
i_ap=i_ap+1;
var timer=setTimeout("showimage()",50)
}
else
{
clearTimeout(timer)
var timer=setTimeout("hideimage()",800)
}
} function hideimage(){
if(i_ap>0)
{
heihei.innerHTML=" <img style='filter:alpha(opacity="+i_ap+")' src='"+imageurl[i_xunhuan]+"'>"
i_ap=i_ap-10
var timer=setTimeout("hideimage()",50)
}
else
{
clearTimeout(timer)
i_xunhuan++
if(i_xunhuan>=imageurl.length)
i_xunhuan=0;
i_ap=100; //上面写的是1 所以判断showimage的时候会花很长时间
var timer=setTimeout("showimage()",500)
} }
</script> <body onLoad="showimage()">
<div id="heihei" style="position:absolute; visibility:visible;top:0px;left:10px"> </div>
<div style=" width:310px; height:30px; position:absolute;top:210px; border-left:1px solid #A8C29F;border-top:1px solid #A8C29F;border-bottom:1px solid #A8C29F;border-right:1px solid #A8C29F; " >
<div id=a1 class="w" onClick="an(0)">1 </div>
<div id=a2 class="w" onClick="an(1)">2 </div>
<div id=a3 class="w" onClick="an(2)">3 </div>
</div>
</body> 这样后 在点击还是有问题
2张连在一起的图片会变快
这就不懂了 切换时间是设置好了的啊
怎么会变快了?? 请指教了