인터넷정보

이미지 슬라이드

알 수 없는 사용자 2007. 10. 18. 13:59
<html>

<head>

<title>─이미지슬라이드<1>─</title>

<script type="text/javascript">

<!-- Original: Mike McGrath (mike_mcgrath@lineone.net) -->

<!-- Web Site: http://website.lineone.net/~mike_mcgrath -->

<!--

var img=new Array();

img[0]=new Image(); img[0].src="http://oxtag.com/html/img/banner3.gif";

img[1]=new Image(); img[1].src="http://oxtag.com/html/img/banner4.gif";

img[2]=new Image(); img[2].src="http://oxtag.com/html/img/banner/jjin_tagpia.gif";



var interval=1500;

var n=0;

var imgs = new Array("http://oxtag.com/html/img/banner3.gif","http://oxtag.com/html/img/banner4.gif","http://oxtag.com/html/img/banner/jjin_tagpia.gif");

function rotate()

{

if(navigator.appName=="Netscape" && document.getElementById)

{

document.getElementById("slide").src=imgs[n];

}

else document.images.slide.src=imgs[n];

(n==(imgs.length-1))?n=0:n++;

setTimeout("rotate()",interval);

}

// -->

</script>



</head>

<body onload="rotate();">

<img src="http://oxtag.com/html/img/banner3.gif" id="slide">

</body>

</html>


─ 설명 ─

<head>와 </head>사이에 왼쪽 쏘스에 있는 자바 스크립트 소스를 넣는다

img[0]=new Image(); img[0].src="img/img2.gif";

img[1]=new Image(); img[1].src="img/img3.gif";

img[2]=new Image(); img[2].src="img/img4.gif";

에는 두 번째부터 보여질 이미지를 넣는다
이미지를 더 많이 넣고 싶으면 img[2] 부분에 숫자를 늘려주면서 추가하면 되고 이미지를 적게 사용하려면 지우면 된다 ^^

var interval=1500;
그림에 멈춰있는 시간
1000=1초

var imgs = new Array("img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif");보여질 이미지를 순서대로 써준다.

<body onload="rotate();">
바디 안에onload="rotate();"소스를 넣는다

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

<img src="이미지주소" id="slide">
가장 먼저 보여질 그림의 경로
반응형

'인터넷정보' 카테고리의 다른 글

이미지 슬라이드  (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
마우스 오버시 툴팁 - 풍선 도움말  (0) 2007.10.18

'인터넷정보'의 다른글

  • 현재글이미지 슬라이드

관련글

댓글

티스토리툴바