http://webarty.com게시판 맹글면서 갤러리에 이미지 슬라이드 쇼 기능 넣을려고 괜찮은거 없나~
하고 자바스크립트 열라 찾아봐도 없어서 걍 맹글었습니다 -_-;
대충 테스트 해보니 별 문제 없이 잘 돌아가는 것 같아서 올립니다.
기능 : 자동실행, 정지, 이전 슬라이드, 다음 슬라이드, 재생시간 설정
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Creative Enboard Community by sOOnsOO </title>
<meta name="generator" content="editplus" />
<meta name="author" content="순수(
soonsoo@gmail.com)" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
body { background: #333; }
hand { cursor: pointer; }
</style>
<script type="text/javascript">
<!--
document.onreadystatechange = fnStartInit;
function fnStartInit() {
if(document.readyState=='complete') {
if(document.getElementById('gLoadingDiv')) {
document.getElementById('gLoadingDiv').style.display = 'none';
setTimeout("_SlideShow()", 100);
}
}
}
// 슬라이드 할 포토 배열
var photo = new Array();
photo[0] = "이미지경로|가로사이즈|세로사이즈";
photo[1] = "이미지경로|가로사이즈|세로사이즈";
photo[2] = "이미지경로|가로사이즈|세로사이즈";
photo[3] = "이미지경로|가로사이즈|세로사이즈";
photo[4] = "이미지경로|가로사이즈|세로사이즈";
photo[5] = "이미지경로|가로사이즈|세로사이즈";
var nowSlide = -1; // 현재 슬라이드 되는 포토번호
var slideTime; // 슬라이드 타임
function _SlideShow() {
if(document.getElementById("isSlideShow").value == "PLAY") {
slideTime = document.getElementById("SHoWTiMe").value * 1000;
nowSlide = (nowSlide == photo.length - 1) ? 0 : ++nowSlide;
var pSlide = photo[nowSlide].split("|");
document.getElementById("SlideShowZone").innerHTML = "<img src=\""+pSlide[0]+"\" width=\""+pSlide[1]+"\" height=\""+pSlide[2]+"\" style=\"border: 5px solid #F63;\">";
setTimeout("_SlideShow()", slideTime);
} else {
clearTimeout("_SlideShow()", 0);
}
}
function _NextSlide() {
// 자동설정 중이라면 중지로 재설정 하자!
if(document.getElementById("isSlideShow").value == "PLAY") document.getElementById("isSlideShow").value = "STOP";
nowSlide = nowSlide + 1;
nowSlide = (nowSlide == photo.length) ? 0 : nowSlide;var pSlide = photo[nowSlide].split("|");
document.getElementById("SlideShowZone").innerHTML = "<img src=\""+pSlide[0]+"\" width=\""+pSlide[1]+"\" height=\""+pSlide[2]+"\" style=\"border: 5px solid #F63;\">";
}
function _PrevSlide() {
// 자동설정 중이라면 중지로 재설정 하자!
if(document.getElementById("isSlideShow").value == "PLAY") document.getElementById("isSlideShow").value = "STOP";
nowSlide = nowSlide - 1;
nowSlide = (nowSlide == -1) ? photo.length - 1 : nowSlide;
var pSlide = photo[nowSlide].split("|");
document.getElementById("SlideShowZone").innerHTML = "<img src=\""+pSlide[0]+"\" width=\""+pSlide[1]+"\" height=\""+pSlide[2]+"\" style=\"border: 5px solid #F63;\">";
}
// 재생시간 설정
function pmTime(type) {
if(type == "+") {
if(document.getElementById("showTime").value < 10) {
document.getElementById("showTime").value = parseInt(document.getElementById("showTime").value) + 1;
document.getElementById("printShowTime").innerHTML = document.getElementById("showTime").value;
} else {
return false;
}
} else {
if(document.getElementById("showTime").value > 1) {
document.getElementById("showTime").value = parseInt(document.getElementById("showTime").value) - 1;
document.getElementById("printShowTime").innerHTML = document.getElementById("showTime").value;
} else {
return false;
}
}
}
// 시작, 정지 세팅
function gSetSlide(val) {
// 세팅되어 있는 값과 동일한 값이라면 다시 세팅하지 않는다.
if(val != document.getElementById("isSlideShow").value) {
document.getElementById("isSlideShow").value = val;
_SlideShow();
} else {
return false;
}
}
//-->
</script>
</head>
<body>
<div id="gLoadingDiv" style="display: ; position: absolute; left:0px; top:0px; width:100%; height:100%; z-index:9999; background-color: #eee; filter:alpha(opacity:50)">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<table width="300" height="50" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="50" align="center"><img src="../__enImages__/icon.processing.gif" border="0"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<table width="850" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="700" height="600" align="center"><span id="SlideShowZone"></span></td>
<td width="1" height="100%" style="background-color: #666;"></td>
<td height="100%" align="center" valign="top" style="background-color: #222;">
<table width="100%" height="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="8"></td>
</tr>
<tr>
<td height="20"><span style="font-size: 12px; color: #F63; font-weight: bold;">::: EnSlider ::::::::::</span></td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td>
<!-- 이미지 보일 시간 -->
<input type="hidden" id="isSlideShow" value="PLAY">
<input type="hidden" id="SHoWTiMe" value="1">
<table cellpadding="3" cellspacing="0" border="0">
<tr>
<td><span style="font-size: 11px; color: #F63;">슬라이드 시간</span> <span style="font-size: 11px; color: #F63;" id="printShowTime">1</span><span style="font-size: 11px; color: #F63;">초</span>
</td>
<td><img src="../__enImages__/sbtn.plus.gif" onClick="pmTime('+');" class="hand"></td>
<td><img src="../__enImages__/sbtn.minus.gif" onClick="pmTime('-');" class="hand"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td height="20" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td><img src="../__enImages__/icon.minus.gif" class="hand" onClick="_PrevSlide();"></td>
<td><img src="../__enImages__/icon.nnext.gif" class="hand" onClick="gSetSlide('PLAY');"></td>
<td><img src="../__enImages__/icon.stop.gif" class="hand" onClick="gSetSlide('STOP');"></td>
<td><img src="../__enImages__/icon.plus.gif" class="hand" onClick="_NextSlide();"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td height="450"> </td>
</tr>
<tr>
<td align="center" valign="bottom"><input type="image" src="../__enImages__/btn.close.gif" onClick="window.close();"></td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
