트랜지션을 이용한이미지 체인징 효과..

 

 

우선< head> 와 사이에 다음의 태그를 넣으세요.
< SCRIPT language=JavaScript1.1>
<!--

var img1 = new Image();
img1.src = "1.jpg";

var img2 = new Image();
img2.src = "2.jpg";

var img3 = new Image();
img3.src = "3.jpg";

var img4 = new Image();
img4.src = "4.jpg";

var img5 = new Image();
img5.src = "5.jpg";
//-->
</SCRIPT>
위에서 바꾸셔야 하는 부분들은 빨간색으로 표시된 부분입니다.

원하시는 만큼 넣으시되 숫자만 계속 바꾸어 주시면 됩니다.

img6.src, img7.src , img8.src 이런식으로....

뒤쪽의 1, 2, 3, 4, 5.jpg 는 이미지의 경로인거 아시겠죠?

그리고 태그 안에 onLoad="init()" 를 추가합니다. 이렇게 ->

그리고 다음의 소스를 사이 아무곳에나 넣습니다.

< SCRIPT language=JavaScript>
<!--

var maxLoops = 3;
var bInterval = 2;
var count = 2;
function init() {
blendtrjs.filters.blendTrans.apply();
document.images.blendtrjs.src = eval("img"+count+".src");
blendtrjs.filters.blendTrans.play();
if (count < maxLoops) {
count++;
}
else {
count = 1;
}
setTimeout("init()", bInterval*700+2000);
}

//-->
</SCRIPT>
바로 이미지의 겹쳐지는 효과를 주기 위해서 쓰는 자바 입니다.

var maxLoops = 5; - 이미지 개수입니다. 저는 5개의 이미지로 변화 시켰으므로 5가 됩니다.

var bInterval = 10; - 이것은 한 이미지가 잠시 멈추는 시간입니다.

그리고 마지막으로 이미지를 넣고 싶은 위치에서 아래 소스를 넣습니다.

<IMG style="FILTER: blendTrans(duration=2)" src="1.jpg" border=0 name=blendtrjs>

1.jpg는 첫 번째 그림이구요. 2라는 숫자는 트렌지션 변환속도입니다.