테스트 사이트 - 개발 중인 베타 버전입니다
SIR

책장을 넘기는 것같은 이미지 슬라이드 쇼 입니다.

혀니천사
프로필 보기이 회원 글보기
 · 9년 전 · 266

<!-- [1단계] 아래의 방법으로 <body> 태그안에 붙여 넣으세요 -->

<body onload="ImageBook()" bgColor=black>

<!-- [2단계] 아래의 스크립트를 <body></body> 태그안에 붙여 넣으세요 -->

<script type="text/javascript">

// 각 변수를 설정 하세요
        var Book_Image_Width=400; // 이미지의 가로
        var Book_Image_Height=300; // 이미지의 높이
        var Book_Border=true; // 테두리 설정여부
        var Book_Border_Color="gray"; // 테두리의 색상
        var Book_Speed=15; // 플립속도
        var Book_NextPage_Delay=1500; //지연시간 1초=1000
        var Book_Vertical_Turn=0;       

// 이미지와 이미지 링크를 설정하세요. (최소 4개이상)
// 링크가 없으면 그냥 공백( "" ) 으로 두시면 됩니다

        Book_Image_Sources=new Array(
                "http://sir.co.kr/image/logo.gif","http://sir.co.kr",
                "http://sir.co.kr/image/v9_gbtitle.gif","http://www.javascript.co.kr",
                 "http://sir.co.kr/image/menu01.gif","", // 링크를 걸지 않을경우
                "http://img.yahoo.co.kr/home/img/m7v9.gif","http://www.naver.com"
                );

        var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
        var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

        function ImageBook(){
                if(document.getElementById){
                        for(i=0;i<Book_Image_Sources.length;i+=2){
                                B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
                         Book_Div=document.getElementById("Book");
                        B_LI=document.createElement("img");Book_Div.appendChild(B_LI);      
                         B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
                         B_MI=document.createElement("img");Book_Div.appendChild(B_MI);      
                         B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
                         B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
                         B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
                         B_LI.style.left=0+"px";
                        B_MI.style.top=0+"px";
                        B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
                         B_RI.style.top=0+"px";
                        B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
                         B_LI.style.height=Book_Image_Height+"px";
                        B_MI.style.height=Book_Image_Height+"px";
                        B_RI.style.height=Book_Image_Height+"px";
                        B_LI.style.width=Book_Image_Width+"px";
                        B_MI.style.width=Book_Image_Width+"px";
                        B_RI.style.width=Book_Image_Width+"px";
                        if(Book_Border){
                                B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
                                 B_LI.style.borderWidth=1+"px";
                                B_MI.style.borderWidth=1+"px";
                                B_RI.style.borderWidth=1+"px";
                                B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
                         B_LI.src=B_Pre_Img[0].src;
                        B_LI.lnk=Book_Image_Sources[1];
                        B_MI.src=B_Pre_Img[2].src;
                        B_MI.lnk=Book_Image_Sources[3];
                        B_RI.src=B_Pre_Img[4].src;
                        B_RI.lnk=Book_Image_Sources[5];
                        B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
                        B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
                         B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
                         BookImages()}}

        function BookImages(){
                if(!B_Stppd){
                        if(Book_Vertical_Turn){
                                B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
                                 MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
                                 B_MI.style.top=MidOffset+"px";
                                B_MI.style.height=B_MSz+"px"}
                        else{        B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
                                 MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
                                 B_MI.style.left=MidOffset+"px";
                                B_MI.style.width=B_MSz+"px"}
                        B_Angle+=Book_Speed/720*Math.PI;
                        if(B_Angle>=Math.PI/2&&B_Direction){
                                B_Direction=0;
                                if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
                                 B_MI.src=B_Pre_Img[B_CrImg].src;
                                B_MI.lnk=Book_Image_Sources[B_CrImg+1];
                                B_CrImg+=2}
                        if(B_Angle>=Math.PI){
                                B_Direction=1;
                                B_TI=B_LI;
                                B_LI=B_MI;
                                B_MI=B_TI;
                                if(Book_Vertical_Turn)B_MI.style.top=0+"px";
                                else B_MI.style.left=Book_Image_Width+1+"px";                      
                                 B_MI.src=B_RI.src;
                                B_MI.lnk=B_RI.lnk;

                                setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
                         else setTimeout("BookImages()",50)}
                else setTimeout("BookImages()",50)}

        function Book_Next_Delay(){
                        if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
                        B_RI.src=B_Pre_Img[B_CrImg].src;
                        B_RI.lnk=Book_Image_Sources[B_CrImg+1];
                        B_MI.style.zIndex=2;
                        B_LI.style.zIndex=1;
                        B_Angle=0;
                        B_CrImg+=2;
                setTimeout("BookImages()",50)}

        function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
        function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
         function B_Rstrt(){B_Stppd=false}
</script>

<div id="Book" style="position:relative">
<img src="placeholder.gif" width="808" height="302">
</div>

<!--
placeholder.gif 의 크기

가로크기는 (보여줄 이미지의 가로+4) * 2 정도로,
세로크기는 (보여줄 이미지의 높이+3) 정도로 설정하시면 됩니다

주의 : 이미지 자체의 크기는 수정하실 필요 없습니다
-->


<!----------------- 여기까지 ----------------->


</body>
</html>

목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
12307
JavaScript 테이블 각 row 마우스오버시 색깔바꾸기 입니다.
12306
JavaScript png 24비트 투명처리하기 입니다.
12305
JavaScript full-down메뉴 자바스크립트 입니다.
12304
JavaScript iframe사용시 높이 자동 조정하기 입니다.
12303
JavaScript 계산기
12302
JavaScript 숫자를 한글로 변환하기 입니다.
12301
JavaScript 아이프레임 자동으로 늘어나는 자바 스크립트 입니다.
12300
JavaScript 끊기지 않는 배너 롤링 입니다.
12299
기타 랜섬에 당한 화일 복구
12298
JavaScript id값 변수명으로 치환 예제 자바스크립트 입니다.
12297
JavaScript 상태바의 링크 주소 감추기 입니다.
12296
JavaScript 가짜 카운터 달기 입니다.
12295
JavaScript 홈에 머문시간을 제목표시줄과 상태바에 실시간으로 알려주기 입니다.
12294
JavaScript prompt 와 alert 응용 자바스크립트 예제 입니다.
12293
JavaScript prompt 와 alert 간단한 자바스크립트 예제 입니다.
12292
jQuery 간단한 탭 제이쿼리
12291
jQuery 간단한 셀렉트 드롭다운 제이쿼리
12290
JavaScript 문서내 이미지갯수 출력하기 입니다.
12289
JavaScript 내용 복사해서 붙어넣기 하면 출처 따라오는 자바스크립트입니다.
12288
JavaScript 팝업창 지정한 시간대에 예약 열기 입니다.
12287
JavaScript 접속때마다 음악 다르게 나오기 입니다.
12286
JavaScript 자동 스크롤 메뉴 관련 입니다.
12285
JavaScript 이 브라우저로 몇페이지나 보았나 확인하기 입니다.
12284
JavaScript 사용자 브라우저의 펄러그인 목록 출력하기 입니다.
12283
JavaScript 상태표시줄 제어 + 간단한 복사 제어 하기 입니다.
이전 다음
전체 목록