Cómo lograr el efecto de cambiar entre la imagen de izquierda a derecha

Este artículo describe el método de JS para lograr el efecto de cambiar entre la imagen de izquierda a derecha. Compártelo para su referencia. El método de implementación específico es el siguiente:

La copia del código es la siguiente:

<style type = "text/css">

.woon {border: 1px sólido #fff;}

.wooff {border: 1px sólido #ffffff; filtro: progid: dximagetransform.microsoft.alpha (style = 1, opacidad = 1500, finaspacity = 1);}

</style>

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

<!-

Window.onerror = function () {return true}

función mm_openbrwindow (theurl, winname, características) {//v2.0

Window.open (Theurl, WinName, características);

}

//->

</script>

<Tabla Width = 500 border = 0 align = Center CellPadding = 0 CellSpacing = 0 Background = "http://s16.sinaimg.cn/middle/60d27f6dt7942731cd87f&690">>

<tr>

<td align = "centro">

<div id = fc style = "Filtro: progid: dximagetransform.microsoft.gradientwipe (duración = 3, gradiente = 0.5, movimiento = avance); ancho: 500px; altura: 260px; borde: 1px sólido #99cc66">>

<div style = "Display: Block"> <a

href = "#" target = _blank> <img onMouseOver = clearAUTO (); onMouseOut = setauTo () Height = 300 src = "http://s15.sinaimg.cn/middle/60d27f6dtbc987f277bde&690" ancho = 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" ancho = 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" ancho = 500 borde = 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 showsum = document.getElementByIdx_x ("num");

function mea (valor) {

n = valor;

setBg (valor);

juega (valor);

}

función setBg (valor) {

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

if (valor == i) {

ShowSum.getElementsByTagName_r ("td") [i] .classname = 'woon';

}

demás{

ShowSum.getElementsBytagName_r ("td") [i] .classname = 'wooff';

}

}

la función reproduce (valor) {

con (fc) {

filtros [0] .Apply ();

para (i = 0; i <4; i ++) i == valor? niños [i] .style.display = "bloque": niños [i] .style.display = "ninguno";

filtros [0] .lay ();

}

}

función clearAuto () {ClearInterval (AutoStart)}

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

function auto () {

n ++;

if (n> 3) n = 0;

Significar);

}

función sub () {

norte--;

if (n <0) n = 3;

Significar);

}

setauto ();

</script>

</body>

</html>

Espero que este artículo sea útil para la programación de JavaScript de todos.