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>
홍콩 여행을 시작하며 ~~~~~~~~~~~
지식과 연습과 용기는 두려움을 극복하는 데 쓰일 당신의 무기와 같다.
어떤 사람은 2000 feet 상공에서 비행기 문 밖으로 주저하지 않고 나갈 수 있다. 다른 사람은 2000명의 사람 앞에 서서 땀 조차 흘리지 않고, 연설을 할 수도 있다. 두려움은 이성적일 수도 있고, 비이성적일 수도 있다. 하지만, 그것은 항상 개인적이고, 실제적이다. 모든 사람은 누구나 어떤 것을 두려워한다.
두려움을 없애기 위해서는 먼저 그것에 직면해야 한다. 100번째의 스카이 다이빙과 연설은 처음만큼 긴장되지 않는다. 처음 하는 것에 대한 두려움을 이겨내기 위한 가장 좋은 방법은 논리와 용기를 통해서 극복하는 것이다. 이성적으로, 비행기에서 뛰어내리거나 연설을 하는 대부분의 사람은 그것 때문에 죽지 않는다. 그들은 꾸준한 연습을 통해서 성공한다. 당신의 장비가 적합하고, 훈련을 잘 받았다면, 당신은 뛰어내릴 준비가 되어 있는 것이다. 당신의 연설이 주의 깊게 짜여지고, 충분히 연습하였다면, 당신은 연설을 시작할 준비가 되어 있는 것이다.
자신감 있는 사람들과 관계를 지속하자. 당신은 당신이 두려워 하는 일을 잘 해낸 사람들을 찾을 수 있을 것이다. 그들이 해낸 일에 바로 지금 도전해 보자. 행동을 통해서 용기는 더 커진다. 두려움은 학습되어 지고, 반드시 버려질 수 있다. 두려움에 맞서게 되면, 당신은 해방감을 느낄 것이다. 두려움이 없다면, 용기도 또한 없다. 두려움은 용감해 질 수 있는 기회를 제공한다.
나는 성공한 사람들의 이야기를 아주 좋아 합니다. 그래서 인터넷 기사던 신문이던 책이던 성공한 사람들에 내용을 자주 읽고 보고 배우려고 노력하고 있습니다.
많은 방법이 있겠지만 열정을 충전하는데 이만한 방법도 드물 것입니다.
작년 한해 동안 몇 권의 성공 이야기를 읽었는가. 그것은 한 인간이 자신의 삶에서 성공을 원하는 정도를 나타낸다고 해도 무리가 이닐것입니다.
정상에 선 사람들을 부러워하고 , 시공간을 초월해서 그들의 방법을 배우는 사람은 언제나
정상에 설 수 있을 것입니다.
그들의 삶은 일상의 ㅃ?ㅏ듯한 삶 속에서도 우리에게 열정을 듬뿍 채워줄 것입니다.
많은 방법이 있겠지만 열정을 충전하는데 이만한 방법도 드물 것입니다.
작년 한해 동안 몇 권의 성공 이야기를 읽었는가. 그것은 한 인간이 자신의 삶에서 성공을 원하는 정도를 나타낸다고 해도 무리가 이닐것입니다.
정상에 선 사람들을 부러워하고 , 시공간을 초월해서 그들의 방법을 배우는 사람은 언제나
정상에 설 수 있을 것입니다.
그들의 삶은 일상의 ㅃ?ㅏ듯한 삶 속에서도 우리에게 열정을 듬뿍 채워줄 것입니다.