图片切换效果代码
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:editor 阅读 223
代码简介:支持火狐的图片切换效果,设计得很漂亮,还带有渐变效果。代码内容:ViewCode<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitio

代码简介:

支持火狐的图片切换效果,设计得很漂亮,还带有渐变效果。

代码内容:

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"><href="/" target="_blank"><img src="http://www.webdm.cn/images/20091005/93401.jpg" width="231" height="319" onmouseover="clearAuto();" 

onmouseout
="setAuto()" /></a><br /><span><href="/" target="_blank">欢迎来到网页代码站</a></span></div>
            <div class="undis"><href="/" target="_blank"><img src="http://www.webdm.cn/images/20091005/93407.jpg" width="231" height="319" onmouseover="clearAuto();" 

onmouseout
="setAuto()" /></a><br /><span><href="/" target="_blank">精品网页代码</a></span></div>
            <div class="undis"><href="/" target="_blank"><img src="http://www.webdm.cn/images/20091005/93411.jpg" width="231" height="319" onmouseover="clearAuto();" 

onmouseout
="setAuto()" /></a><br /><span><href="/" target="_blank">绝色女子:情魅凤陵王</a></span></div>
            <div class="undis"><href="/" target="_blank"><img src="http://www.webdm.cn/images/20091005/93409.jpg" width="231" height="319" onmouseover="clearAuto();" 

onmouseout
="setAuto()" /></a><br /><span><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"
联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2