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.