인터넷정보

이미지 슬라이드쇼

알 수 없는 사용자 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
글씨의 색을 자동으로 변환시켜주는 함수  (0) 2007.10.13
수정이 가능한 텍스트 (인라인텍스트에디터)  (0) 2007.10.13
수정이 가능한 텍스트 (인라인텍스트에디터)  (0) 2007.10.13
이미지 슬라이드쇼  (0) 2007.10.13
폼에대한 142가지의 다양한 js 소스  (0) 2007.10.13
폼에대한 142가지의 다양한 js 소스  (0) 2007.10.13
실시간검색어 예제 - 다음(daum) 스타일  (0) 2007.10.13
실시간검색어 예제 - 다음(daum) 스타일  (0) 2007.10.13
자바스크립트로 구현한 md4,md5,sha-1  (0) 2007.10.13

'인터넷정보'의 다른글

  • 현재글이미지 슬라이드쇼

관련글

댓글

티스토리툴바