태그 소스 자료

[스크랩] 이미지 슬라이드쇼 1

다사랑해 2006. 10. 8. 22:20
이미지 슬라이드쇼 1

ACDSEE 라는 이미지뷰어는 대부분 알고 계실 겁니다.
슬라이드쇼 (Slide Show) 기능이 있어서, 다음 버튼을 누르지 않아도 자동으로 다음 그림으로 넘어가죠. 그와 비슷한 기능을 하는 스크립트입니다. 일정한 시간이 지나면, 다음 그림으로.. 다음 그림으로 넘어갑니다..

예제에는 사용된 그림은 kissofgod01.jpg, kissofgod02.jpg, kissofgod03.jpg, kissofgod04.jpg 이렇게 4장입니다.

에 아래 소스를 넣습니다.

<script type="text/xxxxjavascript">
<!-- 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="kissofgod02.jpg";
img[1]=new Image(); img[1].src="kissofgod03.jpg";
img[2]=new Image(); img[2].src="kissofgod04.jpg";

var interval=1500;
var n=0;
var imgs = new Array("kissofgod01.jpg","kissofgod02.jpg","kissofgod03.jpg","kissofgod04.jpg");
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>

kissofgod01.jpg, kissofgod02.jpg, kissofgod03.jpg, kissofgod04.jpg 는 이미지 슬라이드로 사용되는 그림의 경로 및 이름.
kissofgod01.jpg 는 페이지가 열림과 동시에 가장 먼저 보여지는 그림입니다. 파란색으로 씌어진 부분은 그 뒤에 이어질 그림들입니다. 첫번째 그림( kissofgod01.jpg )가 보여지는 시간이 끝나면 곧바로 다름 그림으로 이어지게 하기 위해 미리 받아두기 위한 부분입니다.

1500 은 그림이 멈춰 있는 시간입니다. 1000=1초입니다. 1500은 1.5초가 되겠죠. 큰 수일수록 멈춰 있는 시간이 길어집니다.

에 xxxxonload="rotate()" 를 추가합니다.

<body xxxxonload="rotate()">
의 이미지 태그 안에 id="slide" 를 아래처럼 추가해줍니다.

<img src="kissofgod01.jpg" id="slide">
kissofgod01.jpg 는 슬라이드 쇼 이미지 중 가장 먼저 보여지는 그림의 경로 및 이름.
출처 : 이미지 슬라이드쇼 1
글쓴이 : winkorea21 원글보기
메모 :