兼容火狐漂亮的图片切换效果代码

代码简介：

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

代码内容：

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 " )[i].className = ' undis ' ; 
}                }             
                 function  clearAuto(){clearInterval(autoStart)}
                 function  setAuto(){autoStart = setInterval( " auto(n) " ,  3000 )}
                 function  auto(){
                    n ++ ;
                     if (n > 3 )n = 0 ;
                    Mea(n);
                }
         window.onload  =   setAuto(); 
            </ script >
         </ div >
   </ div >
 
</ div >
< div  id ="vipBox"  class ="warp960" ></ div >
< div  id ="artList" ></ div >
</ body >
</ html >
< br  />
< p >< a  href ="http://www.webdm.cn" > 网页代码站 </ a >  - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！ </ p >
代码来自：http://www.webdm.cn/webcode/19b7cf07-af0a-452e-9b9e-231e33939910.html

 

转载于:https://www.cnblogs.com/webdm/archive/2011/08/22/2148929.html