How to achieve the effect of switching between image from left to right

This article describes the method of JS to achieve the effect of switching between image from left to right. Share it for your reference. The specific implementation method is as follows:

The code copy is as follows:

<style type="text/css">

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

.wooff{border:1px solid #ffffff;filter:progid:DXImagetransform.Microsoft.Alpha(style=1,opacity=1500, finishedOpacity=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 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" 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" 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" 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" 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>

I hope this article will be helpful to everyone's JavaScript programming.