인터넷정보

이미지 슬라이드

알 수 없는 사용자 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">
가장 먼저 보여질 그림의 경로
반응형