메뉴 건너뛰기

창고/data

이미지 갤러리 (슬라이드쇼, 수동보기 선택)

한석조 2006.11.25 조회 수 : 267072

  

<html>
<head>
<title> 이미지겔러리</title>

<!-- [1단계] 아래의 코드를 <head> 와 </head> 사이에 붙여 넣으세요 -->

<style type="text/css">
.gallerycontroller{
width: 320px /*아래쪽 상자의 가로크기*/
}
.gallerycontent{
width: 100px; /*사진이 나오는 상자의 가로*/
height: 240px; /*높이*/
border: 0px solid black; /*테두리*/
background-color: #DFDFFF; /*배경색*/
padding: 0px; /*안쪽여백*/
display: block;
}

</style>

<script type="text/javascript">
var tickspeed=2000 // 각 슬라이드 지연시간(3000=3초)
var displaymode="auto" // 초기 디스플레이 모드 ("auto" 혹은 "manual")

if (document.getElementById){
document.write('<style type="text/css">n')
document.write('.gallerycontent{display:none;}n')
document.write('</style>n')
}

var selectedDiv=0
var totalDivs=0

function getElementbyClass(classname){
partscollect=new Array()
var inc=0
var alltags=document.all? document.all.tags("DIV") : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
partscollect[inc++]=alltags[i]
}
}

function contractall(){
var inc=0
while (partscollect[inc]){
partscollect[inc].style.display="none"
inc++
}
}

function expandone(){
var selectedDivObj=partscollect[selectedDiv]
contractall()
selectedDivObj.style.display="block"
temp.options[selectedDiv].selected=true
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
if (displaymode=="auto")
autocontrolvar=setTimeout("expandone()",tickspeed)
}

function populatemenu(){
temp=document.gallerycontrol.menu
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<totalDivs;i++){
var thesubject=partscollect[i].getAttribute("subject")
thesubject=(thesubject=="" || thesubject==null)? "HTML Content "+(i+1) : thesubject
temp.options[i]=new Option(thesubject,"")
}
temp.options[0].selected=true
}

function manualcontrol(menuobj){
if (displaymode=="manual"){
selectedDiv=menuobj
expandone()
}
}

function preparemode(themode){
displaymode=themode
if (typeof autocontrolvar!="undefined")
clearTimeout(autocontrolvar)
if (themode=="auto"){
document.gallerycontrol.menu.disabled=true
autocontrolvar=setTimeout("expandone()",tickspeed)
}
else
document.gallerycontrol.menu.disabled=false
}


function startgallery(){
document.getElementById("controldiv").style.display="block"
getElementbyClass("gallerycontent")
totalDivs=partscollect.length
populatemenu()
for (i=0; i<document.gallerycontrol.mode.length; i++){
if (document.gallerycontrol.mode[i].checked)
displaymode=document.gallerycontrol.mode[i].value
}
if (displaymode=="auto")
document.gallerycontrol.menu.disabled=true
expandone()
}

if (window.addEventListener)
window.addEventListener("load", startgallery, false)
else if (window.attachEvent)
window.attachEvent("onload", startgallery)
else if (document.getElementById)
window.onload=startgallery

</script>

<!----------------- 여기까지 ----------------->

</head>

<body>

<!-- [2단계] 아래의 방법으로 <body> 와 </body> 태그 사이에 붙여 넣으세요 -->

<div class="gallerycontent" subject="사진-1"> <!--제목을 넣습니다-->
<img src="이미지주소"><!--사진의 위치 및 설명을 넣습니다-->
<br>첫번째 사진입니다
</div>

<div class="gallerycontent" subject="사진-2">
<img src="이미지주소">
<br>두번째 사진입니다
</div>

<div class="gallerycontent" subject="사진-3">
<img src="이미지주소">
<br>세번째 사진입니다
</div>


<div id="controldiv" style="display:none" class="gallerycontroller">
<form name="gallerycontrol">
<select class="gallerycontroller" size="3" name="menu" onChange="manualcontrol(this.options.selectedIndex)">
<option>Blank form</option>
</select><br>
슬라이드쇼 <input type="radio" checked name="mode" value="auto" onClick="preparemode('auto')"> <br>
수동으로 보기 <input type="radio" name="mode" value="manual" onClick="preparemode('manual')">
</form>
</div>

<!----------------- 여기까지 ----------------->

</body>
</html>


 

수정 삭제 목록
쓰기