본문
<html>
<head>
<title>이미지가 겹치며 로딩</title>
<script language="JavaScript">
<!--
var img1 = new Image()
img1.src = "http://freeimage.kr/data/file/img_share2/thumb/70x90_85/XkZDIHY5_980559_60280625.jpg";
var img2 = new Image()
img2.src = "http://freeimage.kr/data/file/img_share2/thumb/70x90_85/5mc7Wwsn_990397_64325223.jpg";
var img3 = new Image()
img3.src = "http://freeimage.kr/data/file/img_share2/thumb/70x90_85/XkZDIHY5_980559_60280625.jpg";
var img4 = new Image()
img4.src = "http://freeimage.kr/data/file/img_share2/thumb/70x90_85/5mc7Wwsn_990397_64325223.jpg";
// 이미지 이름 설정
var maxLoops = 4; // 이미지 수를 설정
var bInterval = 3; // 전환시 잠깐 멈춰있는 시간수치입니다
var count = 2; // 이미지 순서를 설정
function init()
{
blendObj.filters.blendTrans.apply();
// 이미지가 서서히 나타나도록 설정
document.images.blendObj.src = eval("img"+(parseInt(Math.random()*maxLoops)+1)+".src");
// 이미지 설정
blendObj.filters.blendTrans.play();
// 이미지가 서서히 사라지도록 설정
if(count < maxLoops)
{
count++; // 다음 이미지를 지정하기 위해
}
else
{
count = 1; // 이미지의 개수를 초과 하지 않고 처음 이미지로
}
setTimeout("init()", 3000);
}
//-->
</script>
</head>
<body onLoad="init();">
<div style="left:10; top:10;">
<img src="http://cfile21.uf.tistory.com/image/1252F40E49D02A357FC023" width="500" height="500" name="blendObj" border="0" style="filter:blendTrans(duration=3)">
<!-- duration=3 : 3초 동안 작업이 이루어지도록 설정 -->
</div>
</body>
</html>
관련링크
- http://aube.tistory.com/1062 1143회 연결
댓글목록
등록된 댓글이 없습니다.