그림을 자동으로 돌려가며 디스플레이 합니다.데모를 눌러 확인하세요.
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="javascript: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 부분에서 수정할 수 있습니다. | | | | |