js實現(xiàn)圖片從左往右漸變切換效果的方法

更新時間：2015年02月06日 11:29:57 作者：飛雪

這篇文章主要介紹了js實現(xiàn)圖片從左往右漸變切換效果的方法,是比較典型的圖片漸變切換效果特效,非常具有實用價值,需要的朋友可以參考下

本文實例講述了js實現(xiàn)圖片從左往右漸變切換效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

<style type="text/css">

.woon{border:1px solid #fff;}

.wooff{border:1px solid #ffffff;filter:progid:DXImagetransform.Microsoft.Alpha(style=1,opacity=1500,finishOpacity=1);}

</style>

<script language="JavaScript" type="text/JavaScript">

<!--

window.onerror = function(){return true}

function MM_openBrWindow(theURL,winName,features) { //v2.0

  window.open(theURL,winName,features);

}

//-->

</script>

<table width=500 border=0 align=center cellPadding=0 cellSpacing=0  background="http://s16.sinaimg.cn/middle/60d27f6dt7942731cd87f&690">

    <tr>

      <td height="300" align="center">

        <div id=fc style="filter:progid:DXImagetransform.Microsoft.GradientWipe(duration=3,gradientSize=0.5,motion=forward ); WIDTH:500px; HEIGHT:260px; border:1px solid #99cc66">

          <div style="display:block"><A

                  href="#" target=_blank><img onmouseover=clearAuto(); onmouseout=setAuto() height=300 src="http://s15.sinaimg.cn/middle/60d27f6dtbc987f277bde&690" width=500 border=0></A></div>

        <div style="display: none"><a href="#" target="_blank"><img onmouseover=clearAuto(); onmouseout=setAuto() height=300 src="http://s10.sinaimg.cn/middle/60d27f6dtbc987f42b6b9&690" width=500 border=0></a></div>

        <div style="display: none"><A href="#" target=_blank><img onmouseover=clearAuto(); onmouseout=setAuto() height=300 src="http://s4.sinaimg.cn/middle/60d27f6dtbc987f3c3303&690" width=500 border=0></A></div>

        <div style="display: none"><a href="#" target=_blank><img onmouseover=clearAuto(); onmouseout=setAuto() height=300 src="http://s12.sinaimg.cn/middle/60d27f6dt7942732166fb&690" width=500 border=0></a></div>

      </div></td>

    </tr>

    <tr>

      <td height=100 valign="top"> <table border=0 align=center cellPadding=0 cellSpacing=1 id=num>      

          <tr>

          <td class=woon onmouseover=clearAuto();onclick=Mea(0); onmouseout=setAuto() >

   <img src="http://s15.sinaimg.cn/middle/60d27f6dtbc987f277bde&690" width="120" height="70" style="cursor: hand" onDblClick="MM_openBrWindow('#','','')"></td>

          <td class=wooff onmouseover=clearAuto(); onclick=Mea(1); onmouseout=setAuto() >

      <img src="http://s10.sinaimg.cn/middle/60d27f6dtbc987f42b6b9&690" width="120" height="70" border="0" style="cursor: hand" onDblClick="MM_openBrWindow('#','','')"></td>

          <td class=wooff onmouseover=clearAuto(); onclick=Mea(2); onmouseout=setAuto() >

   <img src="http://s4.sinaimg.cn/middle/60d27f6dtbc987f3c3303&690" width="120" height="70" style="cursor: hand" onDblClick="MM_openBrWindow('#','','')"></td>

          <td class=wooff onmouseover=clearAuto(); onclick=Mea(3); onmouseout=setAuto() >

   <img src="http://s12.sinaimg.cn/middle/60d27f6dt7942732166fb&690" width="120" height="70" style="cursor: hand" onDblClick="MM_openBrWindow('#','','')"></td>

      </table>

<script>

var n=0;

var showNum = document.getElementByIdx_x("num");

function Mea(value){

 n=value;

 setBg(value);

 plays(value);

 }

function setBg(value){

 for(var i=0;i<4;i++)

   if(value==i){

  showNum.getElementsByTagName_r("td")[i].className='woon';

  }

 else{

  showNum.getElementsByTagName_r("td")[i].className='wooff';

  } 

 }

function plays(value){

 with (fc){

  filters[0].Apply();

  for(i=0;i<4;i++)i==value?children[i].style.display="block":children[i].style.display="none";

  filters[0].play();  

  }

}

function clearAuto(){clearInterval(autoStart)}

function setAuto(){autoStart=setInterval("auto(n)", 5000)}

function auto(){

 n++;

 if(n>3)n=0;

 Mea(n);

}

function sub(){

 n--;

 if(n<0)n=3;

 Mea(n);

}

setAuto();

</script>

</body>

</html>