Wie man den Effekt des Umschaltens zwischen Bild von links nach rechts erreicht

Dieser Artikel beschreibt die Methode von JS, um den Effekt des Umschaltens zwischen Bild von links nach rechts zu erreichen. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:

Die Codekopie lautet wie folgt:

<style type = "text/css">

.WOON {BORE: 1PX Solid #fff;}

.Wooff {Border: 1px solide #ffffff; Filter: progid: dimaTeTransform.microsoft.Alpha (style = 1, opacity = 1500, federoPacity = 1);}

</style>

<script Language = "JavaScript" type = "text/javaScript">

<!-

window.onError = function () {return true}

Funktion mm_openbrwindow (Theurl, Winname, Funktionen) {//v2.0

window.open (theurl, winname, features);

}

//->

</script>

<Tabellenbreite = 500 Border = 0 Align = Center CellPadding = 0 Cellspacing = 0 Hintergrund = "http://s16.sinaimg.cn/middle/60d27f6dt7942731cd87f&690">

<tr>

<td align = "center">

<div id = fc style = "filter: progid: diximagetransform.microsoft.gradientWipe (Dauer = 3, GradientSize = 0,5, Bewegung = Vorwärts); Breite: 500px; Höhe: 260px; Rand: 1px Feststoff #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> </divIver

<div style = "display: keine"> <a href = "#" target = "_ leer"> <img onmouseover = clearAuto (); onmouseout = setAuto () height = 300 src = "http://s10.sinaimg.cn/middle/60d27f6dtbc987f42b6b9&690" Width = 500 Border = 0> </a> </diviL>

<div style = "display: keine"> <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: keine"> <a href = "#" target = _blank> <img onmouseover = clearAuto (); onmouseout = setAuto () height = 300 src = "http://s12.sinaimg.cn/middle/60d27f6dt7942732166fb&690" Width = 500 Border = 0> </a> </divIver

</div> </td>

</tr>

<tr>

<td Höhe = 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.sinsinaimg.cn/middle/60d27f6dtbc987f277bde&690" style = "cursor: Hand" ondblclick = "

<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://s4sinaimg.cn/middle/60d27f6dtbc987f3c330&690" style = "cursor: Hand" ondblclick = "mm_openbrwindow ('#', '')") ">"> ">"> "> </td>

<td class = wooff onmouseover = clearAuto (); onclick = mea (3); onmouseout = setAuto ()>

<img src = "http://s12.sinsinaimg.cn/middle/60d27f6dt7942732166fb&690" style = "cursor: Hand" ondblclick = "

</table>

<Script>

var n = 0;

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

Funktion mea (Wert) {

n = Wert;

setBg (Wert);

Spiele (Wert);

}

Funktion setBg (Wert) {

für (var i = 0; i <4; i ++)

if (value == i) {

teamsum.getElementsByTagname_r ("td") [i] .className = 'woon';

}

anders{

teamsum.getElementsByTagname_r ("td") [i] .className = 'wooff';

}

}

Funktion spielt (Wert) {

mit (fc) {

Filter [0] .Apply ();

für (i = 0; i <4; i ++) i == value? Kinder [i] .Style.display = "Block": Kinder [i] .Style.display = "None";

Filter [0] .play ();

}

}

Funktion ClearAuto () {ClearInterval (autostart)}}

Funktion setAuto () {autostart = setInterval ("auto (n)", 5000)}

Funktion auto () {

n ++;

if (n> 3) n = 0;

Bedeuten);

}

Funktion sub () {

N--;

if (n <0) n = 3;

Bedeuten);

}

setAuto ();

</script>

</body>

</html>

Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.