<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 미만의 소수도 가능)
<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 미만의 소수도 가능)
반응형
'인터넷정보' 카테고리의 다른 글
| 이미지 갤러리 만들기 <1> - 작은 그림을 클릭해보면 왼쪽으로 원본 이미지가 뜬다. (0) | 2007.10.18 |
|---|---|
| 이미지 갤러리 만들기 <1> - 작은 그림을 클릭해보면 왼쪽으로 원본 이미지가 뜬다. (0) | 2007.10.18 |
| 이미지 슬라이드 (0) | 2007.10.18 |
| 이미지 슬라이드 (0) | 2007.10.18 |
| 이미지 슬라이드 (0) | 2007.10.18 |
| 이미지 슬라이드 (0) | 2007.10.18 |
| 이미지 슬라이드 (0) | 2007.10.18 |
| 이미지 슬라이드 (마우스오버시멈춤) (0) | 2007.10.18 |
| 이미지 슬라이드 (마우스오버시멈춤) (0) | 2007.10.18 |
| 같은 글자 반복해서 나타내기 (0) | 2007.10.18 |