영원한사랑

이미지 슬라이드쇼

인터넷정보2007. 10. 13. 15:44
기능 : 자동실행, 정지, 이전 슬라이드, 다음 슬라이드, 재생시간 설정

<!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>

'인터넷정보' 카테고리의 다른 글

자바스크립트로 이메일 형식 체크하기  (0) 2007.10.13
프레임 내에서 F5 누르면 현재화면 그대로 새로고침되기  (0) 2007.10.13
팝업차단 체킹 스크립트  (0) 2007.10.13
글씨의 색을 자동으로 변환시켜주는 함수  (0) 2007.10.13
수정이 가능한 텍스트 (인라인텍스트에디터)  (0) 2007.10.13
폼에대한 142가지의 다양한 js 소스  (0) 2007.10.13
실시간검색어 예제 - 다음(daum) 스타일  (0) 2007.10.13
자바스크립트로 구현한 md4,md5,sha-1  (0) 2007.10.13
프레임 경계선을 넘나드는 createPopup()  (0) 2007.10.13
지정된 영역에서 각 레이어 간의 이동 효과(구글,야후)  (0) 2007.10.13

티스토리툴바