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

책장을 넘기는 것같은 이미지 슬라이드 쇼 스크립트

카이루
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 21년 전 · 4554 · 7
여러장의 이미지를 책장을 넘기듯이 보여주는 이미지 슬라이드 스크립트 입니다.
각 이미지별로 링크를 걸 수도 있는 스크립트 입니다

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


참 신기하죠 ㅋㅋㅋ<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>

첨부파일

3123.html (6.8 KB, 674회)
목록
이전글 다음글

댓글 작성

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

로그인하기

댓글 7개

유 자
프로필 보기이 회원 글보기이 회원의 댓글보기
 20년 전
좋은데요^^ 퍼갑니다 ㅎㅎ
영수다
프로필 보기이 회원 글보기이 회원의 댓글보기
 20년 전
주보에 필요한 것...
느낌좋은날
프로필 보기이 회원 글보기이 회원의 댓글보기
 19년 전
한번 써먹어야 겠네요 감사합니다
재아
프로필 보기이 회원 글보기이 회원의 댓글보기
 19년 전
아주 좋네요~~ 굿
ㅎㅕㄴㅣㄴㅔ
프로필 보기이 회원 글보기이 회원의 댓글보기
 11년 전
페이지 순서가 ??? 페이지 순서대로 넘길수 있도록 도와주세요...

게시글 목록

번호 제목
9186
Flash 플래시 프리로딩 소스 3
9168
기타 올블로그(http://www.allblog.net/Home/) 명예의 전당글 가져오기 17
9167
JavaScript [FLV동영상] FLV 반복재생하기
28537
HTML 네이버 openapi 사용하여 쇼핑검색 만들기 2
9163
기타 네이버 openapi 사용하여 한국어사전 만들기 3
28532
HTML 네이버 openapi 사용하여 실시간 인기검색어 보여주기 4
9160
Flash 윈도우즈업그레이드에 따른 플래시 활성화 방안 2
9155
Flash wmode 4
28530
HTML 특정 IP 차단하기... 1
9150
Flash 플래시 flv(동영상) 사용경험담 4
9144
기타 find - 파일찾기 5
28529
HTML window.showModalDialog 항상 위에 뜨는 창 열기
9143
기타 Top으로 ver2
9141
JavaScript 제목에 첫 글자만 스타일적용과 문장의 첫라인 스타일 적용 1
9138
기타 mod_dosevasive v1.8 2
28523
HTML 전화 번호 숫자만 빼오기 5
9132
MySQL mysql 3.23,58 에서 mysql 4.1 utf-8 변환 mysqldump 이용 5
28521
HTML HTML에 얹히지 않은 이미지팝업(화면 중앙으로) 1
9131
기타 vim 에서 인코딩 (utf-8,euc-kr)
9130
Flash 창크기 자동 조절
9129
Flash 플래시 메뉴
28517
HTML 사진을 액자에 넣기(액자 만들기) 3
9126
기타 a+b를 자동 더해주는 인풋 2
28515
HTML 초간단 스크롤 1
9123
JavaScript 메모하지 않으면 깜빡깜빡 잊어버리는 것들 2
9122
기타 빈 무비클립 만들기
9119
Flash 플래쉬 액션 스크립트 모음 ((펌 : 태클사절) 2
9118
기타 PHP로 css 출력하기
9114
JavaScript euc-kr 문서를 utf-8 로 변환 3
9111
기타 펜툴을 이용해서 필요한 만큼만 오려내기 2
28514
HTML 잘되는 센드메일 수신이 안될때...
9109
기타 프린트 페이지바꿔 출력하기 1
9108
기타 Ajax 흉내 내기
9105
JavaScript 포토샵에서 트랜스폼과 카피를 동시에 하는 방법 2
9100
기타 포토샵에서 작업하는 이미지를 전체 화면으로 보려면? 4
9097
JavaScript mod_rewrite 설치 법 2
9096
기타 새 파일 열기(웹용 및 출력용)
9093
JavaScript 포토샵의 블렌딩 모드 2
9089
JavaScript opacity(투명도) 값 쉽게 먹이기. 3
9083
기타 창에 꼭 맞게 확대축소. 5
28511
HTML 글자를 쓰고나서 . . . 다른 글자 수정시 2
9081
기타 서버정보검색 1
9077
기타 텍스트시계 3
9073
PHP 저번주 로또 당첨번호 추출.. 3
9070
기타 Key 관련 2
28510
HTML textarea 에 Tab기능 넣기
9069
기타 mod_bandwidth(트래픽 제한, 접속자당 제한)
9068
MySQL 초보일지 FC4에서 가상호스트설정과정
9067
기타 pop3서버 설치 방법
9065
JavaScript 메뉴 생성 클래스 1
9064
기타 1줄짜리 팁, textarea 자동 리사이즈
9063
JavaScript qpopper(pop3) 설치
9061
기타 아이디뒤에 / 를 않 붙이면 홈페이지 접속이 안됩니다. 1
9060
기타 역재생(rewind)하기
9059
기타 rpm --import /usr/share/rhn/RPM-GPG-KEY-fedora
28509
HTML 자바스크립트 오류 메시지 감추기
9058
JavaScript RTL8201BL 랜카드 잡으려면
9057
MySQL mysql 설치후 실행오류 처리
9056
기타 /etc/sysconfig/i18n 한글 설정
28508
HTML 붙여넣기 + 오른쪽 마우스 클릭 금지(익스만)
9055
JavaScript RedHat(레드햇) 9 설치 후 yum 설치
9054
MySQL RedHat(레드햇) 7.3 에서 APM 빠른 설치
28507
HTML 삼바 설정 간단 쉬운 쉽게
9053
기타 페도라에서 한글 man page 깨지는 현상 해결
9052
JavaScript 메일 릴레이 테스트
9051
MySQL [펌] 리눅스 샌드메일,imap 설치,설정하기
9050
기타 [펌] Sendmail SMTP 인증 설정 관련(SMTP Auth)
9049
PHP [펌] REDHAT Linux 7.3 이상 sendmail 8.11.6 이상 CONNECTION REFUSED 문제
9048
기타 [자바스크립트][펌]자동으로 새로고침이 필요한 페이지에 삽입 - 찾으려면 보이지 않는 팁
9038
PHP 프레임(frame) 새로고침할 때 페이지 유지하기 9
9033
JavaScript 브러시 집안들 브러시 지름을 쉽고 빠르게 조절하자~~~ 4
9032
정규표현식 페도라 코어 3에서 APM 설치하기
9031
Linux rsync를 이용한 미러링
9029
기타 du -h --max-depth=1 1
9026
기타 트래지션 + 마우스오버 2
9024
기타 vi 서비스 편집 1
9023
MySQL 리눅스에서 mysql DB설정
9022
MySQL 리눅스 에서 아파치와 php 설치
9017
Flash 일러스트 CS2와 플래시에서 패스따기 4
9015
기타 centos 4.2가 릴리즈되었습니다. 그런데... 1
28502
HTML 디지털 카메라로 찍은 이미지 밝게하기(설명은 포토샵 CS2 버젼용입니다) 4
9013
기타 이전에 사용한 필터 다시 사용하기 1
9001
기타 페이지 자동 이동 방법 4가지 11
8998
MySQL exif 사용하기 (ms 윈도우용) 2
8994
JavaScript Apache 보안 팁...--;;; 3
8993
기타 [펌] $_FILES
8992
기타 Warning: DocumentRoot [/home/[account]/www] does not exist
8989
JavaScript scp 사용법 2
8988
기타 무비클립을 이용한 방법...(초보)
8987
Flash 선따라 움직이기(초보)
8981
JavaScript 옥션처럼 소스보기 안되는곳에 적용하니까, 소스 보이는 방법 5
8978
기타 마우스우측버튼,F3,F5,F11,F6,마우스키,쉬프트+링크클릭(새창방지),컨트롤 조합키, 백스페이스,드래그 방지 2
8974
MySQL 실수로 삭제한 mysql DB 복구방법 3
8973
JavaScript mozilla DHTML ROWS INSERT & DELETE
8971
기타 웹호스팅 운영하실분들 보시면 도움 많이 되겠습니다. 1
8970
기타 snmp와 mrtg 사용에 대한 설명이 아주 잘 되어있습니다.
8963
JavaScript 제가 집에서 사용하는 서버를 살짝 공개합니다.^^ 6
8959
기타 채색을 해도 채색이 되지 않는 경우 3
8953
JavaScript ssh 무차별 로그인 공격 막기 5
8950
기타 해상도에따라 다른페이지로 접속 2
이전 다음
전체 목록