Comment réaliser l'effet de la commutation entre l'image de gauche à droite

Cet article décrit la méthode de JS pour réaliser l'effet de la commutation entre l'image de gauche à droite. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:

La copie de code est la suivante:

<style type = "text / css">

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

.WOOFF {Border: 1px solide #ffffff; filtre: PROGID: dximageTransform.microsoft.alpha (style = 1, opacité = 1500, finiopacity = 1);}

</ style>

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

<! -

window.onerror = function () {return true}

fonction mm_openbrwindow (theurl, winname, fonctionnalités) {//v2.0

window.open (theurl, winname, fonctionnalités);

}

// ->

</cript>

<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: dxiageTransform.microsoft.gradientwipe (durée = 3, gradiedize = 0,5, mouvement = avant); largeur: 500px; hauteur: 260px; bordure: 1px solide # 99cc66">

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

href = "#" cible = _blank> <img onMouseOver = clearAuto (); onMouseout = setAuto () height = 300 src = "http://s15.sinaimg.cn/middle/60d27f6dtbc987f277bde&690" width = 500 border = 0> </a> </v>

<div style = "affiche: aucun"> <a href = "#" cible = "_ blanc"> <img onMouseOver = clearAuto (); onMouseOut = setAuto () height = 300 src = "http://s10.sinaimg.cn/middle/60d27f6dtbc987f42b6b9&690" width = 500 border = 0> </a> </ div>

<div style = "affiche: aucun"> <a href = "#" cible = _blank> <img onMouseOver = clearAuto (); onMouseOut = setAuto () height = 300 src = "http://s4.sinaimg.cn/middle/60d27f6dtbc987f3c3303&690" width = 500 border = 0> </a> </div>

<div style = "affiche: aucun"> <a href = "#" cible = _blank> <img onMouseOver = clearAuto (); onMouseout = setAuto () height = 300 src = "http://s12.sinaimg.cn/middle/60d27f6dt7942732166fb&690" width = 500 border = 0> </a> </v>

</div> </td>

</tr>

<tr>

<td height = 100 valign = "top"> <Table Border = 0 align = Center CellPadding = 0 CELLSPACINE = 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: main" 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: main" ondblclick = "mm_openbrwindow ('#', '', ')"> </td>

<td class = wooff onMouseOver = clearAuto (); onclick = mea (2); onMouseout = setauto ()>

<img src = "http://s4.sinaimg.cn/middle/60d27f6dtbc987f3c3303&690" style = "curseur: main" 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: main" ondblclick = "mm_openbrwindow ('#', '', ')"> </td>

</ table>

<cript>

var n = 0;

var waketum = document.getElementByidx_x ("num");

fonction mea (valeur) {

n = valeur;

setBg (valeur);

Plays (valeur);

}

fonction setbg (valeur) {

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

if (value == i) {

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

}

autre{

montradum.getElementsByTagName_r ("td") [i] .classname = 'wooff';

}

}

Fonction Plays (valeur) {

avec (fc) {

filtres [0] .Apply ();

pour (i = 0; i <4; i ++) i == valeur? Enfants [i] .style.display = "bloc": enfants [i] .style.display = "None";

filtres [0] .Play ();

}

}

fonction clearAuto () {ClearInterval (autostart)}

fonction setAuto () {autoStart = setInterval ("auto (n)", 5000)}

fonction auto () {

n ++;

if (n> 3) n = 0;

Signifier);

}

fonction sub () {

n--;

if (n <0) n = 3;

Signifier);

}

setAuto ();

</cript>

</docy>

</html>

J'espère que cet article sera utile à la programmation JavaScript de tous.