인터넷정보

이미지 슬라이드쇼

알 수 없는 사용자 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>
반응형