<html>
<head>
<title>슬라이딩 이미지</title>

<script language="JavaScript1.1">
<!--

var img1 = new Image();
img1.src = "img/img1.gif";

var img2 = new Image();
img2.src = "img/img2.gif";

var img3 = new Image();
img3.src = "img/img3.gif";

var img4 = new Image();
img3.src = "img/img4.gif";

//-->
</script>


</head>

<body onLoad="init();">



<img src="img/img1.gif" name="blendtrjs" border="0" style="filter: blendTrans(duration=2)">



<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>

</body>

</html>




<head>와 </head>사이에 아래의 소스를 넣는다

<script language="JavaScript1.1">
<!--

var img1 = new Image();
img1.src = "img/img1.gif";

var img2 = new Image();
img2.src = "img/img2.gif";

var img3 = new Image();
img3.src = "img/img3.gif";

var img4 = new Image();
img3.src = "img/img4.gif";

//-->
</script>

위에 소스에서 초록색으로 된 부분을 수정해 준다 이미지 주소를 넣어야겠죠? ^^
이미지를 더 많이 넣고 싶으면 img3.src 이부분에 숫자를 늘려주면 되어 ^^


<body>와 <.body>사이에 아무곳에나 아래의 소스를 넣는다
<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>


<body>와 </body> 사이에 이미지가 보여 질곳에 아래의 소스를 넣는다
<img src="이미지주소" name="blendtrjs" border="0" style="filter: blendTrans(duration=2)">

duration=2 에서 2는 트랜지션의 변환속도 (낮을수록 빠름, 1 미만의 소수도 가능)
Posted by 알 수 없는 사용자
,