본문 바로가기
정보창고/블로그 정보

HTML-Slide Show

풍란의 향기 2012. 2. 9. 13:27

[Image] 슬라이드쇼
그림을 자동으로 돌려가며 디스플레이 합니다.데모를 눌러 확인하세요.



Script Example
<html>
<head><title>데모</title>
<script language="JavaScript1.1">
<!--
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location!=slidelinks[whichlink]
winslide.focus()
}
//-->
</script>
</head>
<body>
<a href="javascripｔ:gotoshow()"><img src="./img/photo1.jpg" name="slide" border=0 width=300 height=375></a>
<script>
<!--
slideshowimages("./img/photo1.jpg","./img/photo2.jpg","./img/photo3.jpg")
slideshowlinks("http://1번링크","http://2번링크","http://3번링크")
var slideshowspeed=2000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
</body>
</html>


설명
녹색부분을 head 태그 사이에 넣으시고 body 태그 안에 있는 내용이 실제로 보여지는곳입니다. 그림을 지정할때는 상대경로명으로 지정하고 각각의 그림이 보여질때 링크시킬 문서를 순서대로 적으세요. 그림을 추가하고 싶으면 파란색부분에서 그림부분을 추가하시고 그 아래 링크된부분도 같이 추가시켜줍니다. 그림 변화의 움직임은 그 아래 slideshowspeed 부분에서 수정할 수 있습니다.

'정보창고 > 블로그 정보' 카테고리의 다른 글

HTML-상태바에 메세지 출력  (0) 2012.02.09
HTML-랜덤 배경그림  (0) 2012.02.09
HTML-움직이는 배경그림  (0) 2012.02.09
HTML-폭탄태그=거시기들 에게만 사용하셈  (0) 2012.02.09
HTML-Filter Tag  (0) 2012.02.09

'정보창고/블로그 정보' Related Articles

티스토리툴바