左から右に画像間を切り替える効果を実現する方法

この記事では、左から右に画像間を切り替える効果を実現するJSの方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。

コードコピーは次のとおりです。

<style type = "text/css">

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

.WOOFF {border：1px solid #ffffff; filter：progid：dmimagetransform.microsoft.alpha（style = 1、ofacity = 1500、finedopacity = 1）;}

</style>

<スクリプト言語= "javascript" type = "text/javascript">

<！ -

window.onerror = function（）{return true}

function mm_openbrwindow（theurl、winname、feature）{//v2.0

window.open（theurl、winname、feature）;

}

//->

</script>

<テーブル幅= 500ボーダー= 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：dmimagetransform.microsoft.gradientwipe（duration = 3、gradiantsize = 0.5、motion = forward）; width：500px; height：260px; border：1px solid＃99cc66">

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

href = "＃"ターゲット= _blank> <img onmouseover = clearauto（）; onmouseout = setauto（）height = 300 src = "http://s15.sinaimg.cn/middle/60d27f6dtbc987f277bde＆vidth = 500 border = 0> </a> </div>

<div style = "display：none"> <a href = "＃"ターゲット= "_ blank"> <img onmouseover = clearauto（）; onmouseout = setauto（）height = 300 src = "http://s10.sinaimg.cn/middle/60d27f6dtbc987f42b6b9＆690" width = 500境界= 0> </a> </div>

<div style = "display：none"> <a href = "＃"ターゲット= _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：none"> <a href = "＃"ターゲット= _blank> <img onmouseover = clearauto（）; onmouseout = setauto（）height = 300 src = "http://s12.sinaimg.cn/middle/60d27f6dt7942732166fb&690" width = 500 border = 0> </a> </div>

</div> </td>

</tr>

<tr>

<td height = 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.sinaimg.cn/middle/60d27f6dtbc987f277bde &690" style = "cursor：" 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：" ondblclick = "mm_openbrwindow（ '＃' ''） '）"> </td>

<td class = wooff onmouseover = clearauto（）; onclick = mea（2）; onmouseout = setauto（）>

<img src = "http://s4.sinaimg.cn/middle/60d27f6dtbc987f3c3303&690" style = "cursor：" ondblclick = "mm_openbrwindow（ '＃' '、'）" '> </td>

<td class = wooff onmouseover = clearauto（）; onclick = mea（3）; onmouseout = setauto（）>

<img src = "http://s12.sinaimg.cn/middle/60d27f6dt7942732166666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666）" cursor： "ondblclick =" mm_openbrwindow（ '＃'、 ''） "> </td>

</table>

<スクリプト>

var n = 0;

var shownum = document.getElementByIdx_x（ "num"）;

function mea（value）{

n =値;

setbg（value）;

プレイ（価値）;

}

function setbg（value）{

for（var i = 0; i <4; i ++）

if（value == i）{

shownum.getelementsbytagname_r（ "td"）[i] .classname = 'woon';

}

それ以外{

shownum.getelementsbytagname_r（ "td"）[i] .classname = 'wooff';

}

}

関数再生（値）{

（fc）{

フィルター[0] .Apply（）;

for（i = 0; i <4; i ++）i == value？children [i] .style.display = "block"：children [i] .style.display = "none";

フィルター[0] .play（）;

}

}

function clearauto（）{clearinterval（autostart）}

function setauto（）{autostart = setInterval（ "auto（n）"、5000）}

function auto（）{

n ++;

if（n> 3）n = 0;

平均）;

}

function sub（）{

n - ;

if（n <0）n = 3;

平均）;

}

setauto（）;

</script>

</body>

</html>

この記事がみんなのJavaScriptプログラミングに役立つことを願っています。