代码简介:
支持火狐的图片切换效果,设计得很漂亮,还带有渐变效果。
代码内容:

View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>兼容火狐漂亮的图片切换效果代码_网页代码站(www.webdm.cn)</title> <link href="http://www.webdm.cn/images/20091005/ycStyle200905.css" rel="stylesheet" type="text/css" /> </head> <body> <div style="height:100px;"></div> <div id="topArea"> <div class="leftBox1"> <div class="foc"> <div id="bigImg" style="filter:progid:DXImageTransform.Microsoft.Fade( duration=0.5,overlap=1.0)"> <div class="dis"><a href="/" target="_blank"><img src="http://www.webdm.cn/images/20091005/93401.jpg" width="231" height="319" onmouseover="clearAuto();"
onmouseout="setAuto()" /></a><br /><span><a href="/" target="_blank">欢迎来到网页代码站</a></span></div> <div class="undis"><a href="/" target="_blank"><img src="http://www.webdm.cn/images/20091005/93407.jpg" width="231" height="319" onmouseover="clearAuto();"
onmouseout="setAuto()" /></a><br /><span><a href="/" target="_blank">精品网页代码</a></span></div> <div class="undis"><a href="/" target="_blank"><img src="http://www.webdm.cn/images/20091005/93411.jpg" width="231" height="319" onmouseover="clearAuto();"
onmouseout="setAuto()" /></a><br /><span><a href="/" target="_blank">绝色女子:情魅凤陵王</a></span></div> <div class="undis"><a href="/" target="_blank"><img src="http://www.webdm.cn/images/20091005/93409.jpg" width="231" height="319" onmouseover="clearAuto();"
onmouseout="setAuto()" /></a><br /><span><a href="/" target="_blank">小仙女:眷恋五百年</a></span></div> </div> <div class="rbox"> <div id="thumbImg"> <div class="cur"><img src="http://www.webdm.cn/images/20091005/93402.jpg" alt="" onclick="Mea(0);" onmouseover="clearAuto();" onmouseout="setAuto()" /></div><p></p><div class="normal"><img src="http://www.webdm.cn/images/20091005/93408.jpg" alt="" onclick="Mea(1);" onmouseover="clearAuto();" onmouseout="setAuto()" /></div><p></p><div class="normal"><img src="http://www.webdm.cn/images/20091005/93412.jpg" alt="" onclick="Mea(2);" onmouseover="clearAuto();" onmouseout="setAuto()" /></div><p></p><div class="normal"><img src="http://www.webdm.cn/images/20091005/93410.jpg" alt="" onclick="Mea(3);" onmouseover="clearAuto();" onmouseout="setAuto()" /></div> </div> <div class="more color_717"></div> </div> <div class="cb"></div> <script language="javascript">
var n=0;
var showImg = document.getElementById("bigImg");
var showNum = document.getElementById("thumbImg");
var ie = document.all?true:false;
function Mea(value){
n=value;
setBg(value);
plays(value);
}
function setBg(value){
for(var i=0;i<4;i++)
if(value==i){showNum.getElementsByTagName("div")[i].className='cur';}
else{showNum.getElementsByTagName("div")[i].className='normal';}
}
function plays(value){
if(ie){with (bigImg){
filters[0].Apply();
for(i=0;i<4;i++)i==value?showImg.getElementsByTagName("div")[i].className='dis':showImg.getElementsByTagName("div")[i].className='undis';
filters[0].play();
}
}else{
for(i=0;i<4;i++)i==value?showImg.getElementsByTagName("div")[i].className='dis':showImg.getElementsByTagName("div"