왼쪽에서 오른쪽으로 이미지를 전환하는 효과를 달성하는 방법

이 기사에서는 왼쪽에서 오른쪽으로 이미지를 전환하는 효과를 달성하기위한 JS 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.

코드 사본은 다음과 같습니다.

<스타일 유형 = "텍스트/CSS">

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

.wooff {border : 1px solid #ffffff; 필터 : progid : dximagetransform.microsoft.alpha (style = 1, 불투명도 = 1500, doginesopacity = 1);}

</스타일>

<script language = "javaScript"type = "text/javaScript">

<!-

window.onerror = function () {return true}

함수 MM_OPENBRWINDOW (TheURL, Winname, Featu역) {//v2.0

Window.open (Theurl, Winname, 기능);

}

//->

</스크립트>

<테이블 너비 = 500 테두리 = 0 ALIGN = CENTER CELLPADDING = 0 CellSpacing = 0 BANGU

<tr>

<td align = "center">

<div id = fc style = "필터 : progid : dximagetransform.microsoft.gradientWipe (duration = 3, gradientsize = 0.5, motion = forward); 너비 : 500px; 높이 : 260px; 테두리 : 1px 고체 #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> </div>

<div style = "display : none"> <a href = "#"target = "_ blank"> <img onmouseover = clearauto (); onMouseOut = setAuto () height = 300 src = "http://s10.sinaimg.cn/middle/60d27f6dtbc987f42b6b9&690"width = 500 Border = 0> </a> </div>

<div style = "display : none"> <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 : none"> <a href = "#"target = _blank> <img onmouseover = clearauto (); onMouseOut = setAuto () height = 300 src = "http://s12.sinaimg.cn/middle/60d27f6dt794273216fb&690"width = 500 Border = 0> </a> </div>

</div> </td>

</tr>

<tr>

<td height = 100 valign = "top"> <테이블 테두리 = 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 : hand"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 : hand"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 : hand"ondblclick = "mm_openbrwindow ( '#', '', '')"> </td>

<td class = wooff onmouseOver = clearauto (); onclick = mea (3); OnMouseOut = setAuto ()>

<img src = "http://s12.sinaimg.cn/middle/60d27f6dt794273216fb&690"style = "cursor : hand"ondblclick = "mm_openbrwindow ( '#', '', '')"> </td>

</테이블>

<cript>

var n = 0;

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

함수 mea (value) {

n = 값;

setbg (값);

연극 (가치);

}

함수 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 ();

}

}

함수 clearauto () {clearinterval (autostart)}

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

함수 auto () {

n ++;

if (n> 3) n = 0;

평균);

}

함수 sub () {

N--;

if (n <0) n = 3;

평균);

}

setAuto ();

</스크립트>

</body>

</html>

이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.