Como alcançar o efeito de alternar entre a imagem da esquerda para a direita

Este artigo descreve o método do JS para alcançar o efeito de alternar entre a imagem da esquerda para a direita. Compartilhe para sua referência. O método de implementação específico é o seguinte:

A cópia do código é a seguinte:

<style type = "text/css">

.WOON {Border: 1px Solid #fff;}

.wooff {borda: 1px sólido #fffff; filtro: progid: dximageTransform.microsoft.alpha (style = 1, opacidade = 1500, finalizepacity = 1);}

</style>

<Script Language = "JavaScript" type = "text/javascript">

<!-

window.onerror = function () {return true}

função mm_openbrwindow (theurl, winname, recursos) {//v2.0

window.open (Theurl, Winname, recursos);

}

//->

</script>

<tabela largura = 500 borda = 0 alinhamento = CENTRO CELLPADDING = 0 CellSpacacing = 0 Background = "http://s16.sinaimg.cn/middle/60d27f6dt7942731cd87f&690">

<tr>

<td align = "Center">

<div id = fc style = "filtro: progid: dximagetransform.microsoft.gradientWipe (duração = 3, gradientize = 0,5, movimento = avançado); largura: 500px; altura: 260px; borda: 1px Solid #99cc66">

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

href = "#" Target = _blank> <img onMouseOver = clearauto (); onmouseout = setauto () altura = 300 src = "http://s15.sinaimg.cn/middle/60d27f6dtbc987f277bde&690" largura = 500 fronteira = 0> </a> </div>

<div style = "display: nenhum"> <a href = "#" target = "_ Blank"> <img onMouseOver = clearauto (); onmouseout = setauto () altura = 300 src = "http://s10.sinaimg.cn/middle/60d27f6dtbc987f42b6b9&690" width = 500 border = 0> </a> </div>

<div style = "display: nenhum"> <a href = "#" destino = _blank> <img onMouseOver = clearauto (); onmouseout = setauto () altura = 300 src = "http://s4.sinimg.cn/middle/60d27f6dtbc987f3c3303&690" largura = 500 fronteira = 0> </a> </div>

<div style = "display: nenhum"> <a href = "#" destino = _blank> <img onMouseOver = clearauto (); onmouseout = setauto () altura = 300 src = "http://s12.sinaimg.cn/middle/60d27f6dt7942732166fb&690" width = 500 border = 0> </a> </div>

</div> </td>

</tr>

<tr>

<altura td = 100 valign = "top"> <borda da tabela = 0 alinhamento = central de célula CENTRO = 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 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 class = wooff onMouseOver = clearauto (); OnClick = MEA (2); onMouseOut = setauto ()>

<img src = "http://s4.sinaimg.cn/middle/60d27f6dtbc987f3c3303&690" style = "cursor: hand" ondblclick = "mm_openbrondw ('#', '' '' ')")

<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 ('#', '' '')

</tabela>

<Cript>

var n = 0;

var mostroundum = document.getElementbyidx_x ("num");

função mea (valor) {

n = valor;

setbg (valor);

reproduções (valor);

}

função setbg (value) {

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

if (value == i) {

mostrado.getElementsByTagName_R ("TD") [i] .className = 'woon';

}

outro{

mostrado.getElementsByTagName_R ("TD") [i] .className = 'wooff';

}

}

Função reproduções (valor) {

com (fc) {

filtros [0] .Apply ();

para (i = 0; i <4; i ++) i == valor? crianças [i] .style.display = "bloco": crianças [i] .style.display = "nenhum";

filtros [0] .Play ();

}

}

function clearauto () {clearInterval (AutoStart)}

função setauto () {AutoStart = setInterval ("Auto (n)", 5000)}

function auto () {

n ++;

if (n> 3) n = 0;

Significar);

}

função sub () {

n--;

if (n <0) n = 3;

Significar);

}

setauto ();

</script>

</body>

</html>

Espero que este artigo seja útil para a programação JavaScript de todos.