Как достичь эффекта переключения между изображением слева направо

В этой статье описывается метод JS для достижения эффекта переключения между изображением слева направо. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:

Кода -копия выглядит следующим образом:

<стиль типа = "text/css">

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

.woooff {border: 1px solid #ffffff; filter: progid: dximageTransform.microsoft.alpha (style = 1, непрозрачность = 1500, fendopacity = 1);}

</style>

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

<!-

window.onerror = function () {return true}

Функция mm_openbrwindow (theurl, Winname, функции) {//v2.0

window.open (Theurl, Winname, функции);

}

//->

</script>

<ТАБЛИЦА ЗАДАЧА = 500 BODER = 0 ALIGN = CENTER CellPadding = 0 CellSpacing = 0 founal = "http://s16.sinaimg.cn/middle/60d27f6dt7942731cd87f&690">

<tr>

<td align = "center">

<div id = fc style = "Фильтр: Progid: dximageTransform.microsoft.gradientWipe (длительность = 3, градиенты = 0,5, движение = вперед); ширина: 500px; высота: 260px; граница: 1px solut #99cc66">

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

href = "#" target = _blank> <img onmouseover = clearAuto (); onmouseout = setauto () height = 300 src = "http://s15.sinaimg.cn/middle/60d27f6dtbc987f277bde&690" Ширина = 500 граница = 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" Ширина = 500 граница = 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" Ширина = 500 граница = 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" Ширина = 500 граница = 0> </a> </div>

</div> </td>

</tr>

<tr>

<TD Height = 100 valign = "top"> <таблица границы = 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 = woooff 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 = woooff 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 = woooff onmouseover = clearAuto (); onclick = mea (3); onmouseout = setauto ()>

<img src = "http://s12.sinaimg.cn/middle/60d27f6dt7942732166fb&690" style = "cursor: hand" ondblclick = "mm_openbrwindow ('#', '', ')"> </td>

</table>

<Скрипт>

var n = 0;

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

функция mea (value) {

n = значение;

setbg (значение);

Plays (значение);

}

функция setBg (value) {

для (var i = 0; i <4; i ++)

if (value == i) {

showum.getelementsbytagname_r ("td") [i] .classname = 'woon';

}

еще{

showum.getelementsbytagname_r ("td") [i] .classname = 'woooff';

}

}

Функция воспроизводит (значение) {

с (fc) {

фильтры [0] .apply ();

for (i = 0; i <4; i ++) i == Значение? Дети [i] .style.display = "block": дети [i] .style.display = "none";

фильтры [0] .play ();

}

}

Функция clearAuto () {clearInterval (autoStart)}

function setauto () {autostart = setInterval ("auto (n)", 5000)}

функция auto () {

n ++;

if (n> 3) n = 0;

Иметь в виду);

}

функция sub () {

n--;

if (n <0) n = 3;

Иметь в виду);

}

setauto ();

</script>

</body>

</html>

Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.