js实现图片从左往右渐变切换效果的方法
本文实例讲述了js实现图片从左往右渐变切换效果的方法。分享给大家供大家参考。具体实现方法如下：
<styletype="text/css">
.woon{border:1pxsolid#fff;}
.wooff{border:1pxsolid#ffffff;filter:progid:DXImagetransform.Microsoft.Alpha(style=1,opacity=1500,finishOpacity=1);}
</style>
<scriptlanguage="JavaScript"type="text/JavaScript">
<!--
window.onerror=function(){returntrue}
functionMM_openBrWindow(theURL,winName,features){//v2.0
window.open(theURL,winName,features);
}
//-->
</script>
<tablewidth=500border=0align=centercellPadding=0cellSpacing=0 background="http://s16.sinaimg.cn/middle/60d27f6dt7942731cd87f&690">
<tr>
<tdheight="300"align="center">
<divid=fcstyle="filter:progid:DXImagetransform.Microsoft.GradientWipe(duration=3,gradientSize=0.5,motion=forward);WIDTH:500px;HEIGHT:260px;border:1pxsolid#99cc66">
<divstyle="display:block"><A
href="#"target=_blank><imgonmouseover=clearAuto();onmouseout=setAuto()height=300src="http://s15.sinaimg.cn/middle/60d27f6dtbc987f277bde&690"width=500border=0></A></div>
<divstyle="display:none"><ahref="#"target="_blank"><imgonmouseover=clearAuto();onmouseout=setAuto()height=300src="http://s10.sinaimg.cn/middle/60d27f6dtbc987f42b6b9&690"width=500border=0></a></div>
<divstyle="display:none"><Ahref="#"target=_blank><imgonmouseover=clearAuto();onmouseout=setAuto()height=300src="http://s4.sinaimg.cn/middle/60d27f6dtbc987f3c3303&690"width=500border=0></A></div>
<divstyle="display:none"><ahref="#"target=_blank><imgonmouseover=clearAuto();onmouseout=setAuto()height=300src="http://s12.sinaimg.cn/middle/60d27f6dt7942732166fb&690"width=500border=0></a></div>
</div></td>
</tr>
<tr>
<tdheight=100valign="top"><tableborder=0align=centercellPadding=0cellSpacing=1id=num>
<tr>
<tdclass=woononmouseover=clearAuto();onclick=Mea(0);onmouseout=setAuto()>
<imgsrc="http://s15.sinaimg.cn/middle/60d27f6dtbc987f277bde&690"width="120"height="70"style="cursor:hand"onDblClick="MM_openBrWindow('#','','')"></td>
<tdclass=wooffonmouseover=clearAuto();onclick=Mea(1);onmouseout=setAuto()>
<imgsrc="http://s10.sinaimg.cn/middle/60d27f6dtbc987f42b6b9&690"width="120"height="70"border="0"style="cursor:hand"onDblClick="MM_openBrWindow('#','','')"></td>
<tdclass=wooffonmouseover=clearAuto();onclick=Mea(2);onmouseout=setAuto()>
<imgsrc="http://s4.sinaimg.cn/middle/60d27f6dtbc987f3c3303&690"width="120"height="70"style="cursor:hand"onDblClick="MM_openBrWindow('#','','')"></td>
<tdclass=wooffonmouseover=clearAuto();onclick=Mea(3);onmouseout=setAuto()>
<imgsrc="http://s12.sinaimg.cn/middle/60d27f6dt7942732166fb&690"width="120"height="70"style="cursor:hand"onDblClick="MM_openBrWindow('#','','')"></td>
</table>
<script>
varn=0;
varshowNum=document.getElementByIdx_x("num");
functionMea(value){
n=value;
setBg(value);
plays(value);
}
functionsetBg(value){
for(vari=0;i<4;i++)
if(value==i){
showNum.getElementsByTagName_r("td")[i].className='woon';
}
else{
showNum.getElementsByTagName_r("td")[i].className='wooff';
}
}
functionplays(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();
}
}
functionclearAuto(){clearInterval(autoStart)}
functionsetAuto(){autoStart=setInterval("auto(n)",5000)}
functionauto(){
n++;
if(n>3)n=0;
Mea(n);
}
functionsub(){
n--;
if(n<0)n=3;
Mea(n);
}
setAuto();
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。