Cara mencapai efek beralih antar gambar dari kiri ke kanan

Artikel ini menjelaskan metode JS untuk mencapai efek beralih di antara gambar dari kiri ke kanan. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:

Salinan kode adalah sebagai berikut:

<type style = "text/css">

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

.wooff {border: 1px solid #ffffff; filter: progid: dximagetransform.microsoft.alpha (style = 1, opacity = 1500, fleedopacity = 1);}

</tyle>

<bahasa skrip = "javascript" type = "text/javascript">

<!-

window.onError = function () {return true}

fungsi mm_openbrwindow (theUrl, winname, fitur) {//v2.0

window.open (theUrl, winname, fitur);

}

//->

</script>

<Lebar Tabel = 500 Border = 0 Align = Centre CellPadding = 0 Cellspacing = 0 Background = "http://s16.sinimg.cn/middle/60d27f6dt7942731cd87f&690">

<tr>

<td align = "center">

<Div id = fc style = "Filter: progid: dximagetransform.microsoft.gradientwipe (durasi = 3, gradien = 0,5, gerak = maju); lebar: 500px; tinggi: 260px; Border: 1px solid #99cc66" ">

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

href = "#" target = _blank> <img onmouseover = clearauto (); onmouseout = setauto () tinggi = 300 src = "http://s15.sinaimg.cn/middle/60d27f6dtbc987f277bde&690" lebar = 500 perbatasan = 0> </a> </div>

<div style = "display: none"> <a href = "#" target = "_ blank"> <img onmouseover = clearauto (); onmouseout = setauto () tinggi = 300 src = "http://s10.sinaimg.cn/middle/60d27f6dtbc987f42b6b9&690" lebar = 500 perbatasan = 0> </a> </div>

<div style = "display: none"> <a href = "#" target = _blank> <img onmouseover = clearauto (); onmouseout = setauto () tinggi = 300 src = "http://s4.sinaimg.cn/middle/60d27f6dtbc987f3c3303&690" lebar = 500 border = 0> </a> </div>

<div style = "display: none"> <a href = "#" target = _blank> <img onmouseover = clearauto (); onmouseout = setauto () tinggi = 300 src = "http://s12.sinaimg.cn/middle/60d27f6dt7942732166fb&690" lebar = 500 perbatasan = 0> </a> </div>

</div> </td>

</tr>

<tr>

<TD tinggi = 100 valign = "atas"> <border tabel = 0 align = cellpadding tengah = 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" ontdblClick = "mm_openbrwindow ('

<td class = wooff onmouseover = clearauto (); OnClick = MEA (1); onmouseout = setauto ()>

<img src = "http://s10.sinaimg.cn/middle/60d27f6dtbc987f42b6b9&690" style = "cursor: hand" ontdblclick = "mm_openbrwindow ('

<td class = wooff onmouseover = clearauto (); OnClick = MEA (2); onmouseout = setauto ()>

<img src = "http://s4.sinaimg.cn/middle/60d27f6dtbc987f3c3303&690" style = "kursor: tangan" ondblclick = "mm_openbrwind ('#', ''

<td class = wooff onmouseover = clearauto (); OnClick = MEA (3); onmouseout = setauto ()>

<img src = "http://s12.sinaimg.cn/middle/60d27f6dt7942732166fb&690" style = "cursor: hand" ontdblClick = "mm_openbrwindow ('

</boable>

<script>

var n = 0;

var showum = document.geteLementByIdx_x ("num");

function mea (value) {

n = nilai;

setBg (nilai);

bermain (nilai);

}

fungsi setBg (value) {

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

if (value == i) {

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

}

kalau tidak{

showum.getElementsbytagname_r ("td") [i] .classname = 'wooff';

}

}

fungsi bermain (value) {

dengan (fc) {

filter [0] .Apply ();

untuk (i = 0; i <4; i ++) i == nilai? anak -anak [i] .style.display = "block": anak -anak [i] .style.display = "none";

filter [0] .play ();

}

}

function clearauto () {clearInterval (autostart)}

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

fungsi auto () {

n ++;

if (n> 3) n = 0;

Berarti);

}

fungsi sub () {

N--;

if (n <0) n = 3;

Berarti);

}

setauto ();

</script>

</body>

</html>

Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.