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

카이루

· 20년 전 · 조회 4549 4549 · 댓글 7 7

여러장의 이미지를 책장을 넘기듯이 보여주는 이미지 슬라이드 스크립트 입니다.
각 이미지별로 링크를 걸 수도 있는 스크립트 입니다



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



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





</body>
</html>

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

첨부파일

3123.html (6.8 KB, 674회)

댓글 작성

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

로그인하기

댓글 7개

유 자

프로필 보기 이 회원 글보기

20년 전

좋은데요^^ 퍼갑니다 ㅎㅎ

영수다

프로필 보기 이 회원 글보기

20년 전

주보에 필요한 것...

느낌좋은날

프로필 보기 이 회원 글보기

19년 전

한번 써먹어야 겠네요 감사합니다

둘리

프로필 보기 이 회원 글보기

19년 전

절 쓰겠슴다

재아

프로필 보기 이 회원 글보기

19년 전

아주 좋네요~~ 굿

까궁

프로필 보기 이 회원 글보기

17년 전

감사합니다^^

ㅎㅕㄴㅣㄴㅔ

프로필 보기 이 회원 글보기

11년 전

페이지 순서가 ??? 페이지 순서대로 넘길수 있도록 도와주세요...

게시글 목록

번호	제목	글쓴이	조회	날짜
8511	JavaScript 아파치 로그 정리(압축) logrotate	This	3,955	20년 전
8510	MySQL 아파치와 mysql 자동실행 시키는 방법..	This	2,901	20년 전
8509	MySQL 특정시간에 mysql 데이타 백업 (mysqldump)	This	3,621	20년 전
8506	PHP 아파치 무단링크 막기 2	This	3,410	20년 전
8505	MySQL MySQL optimization 한글번역문서 (최영봉님 글)	root	3,712	20년 전
8503	기타 서브도메인 자동셋팅 Rewrite(리눅스 BIND, 아파치설정) 1	ⓒⓒⓒ	8,548	20년 전
8502	기타 불여우 iframe 에서 지원하는 on 이벤트	관리자	2,570	20년 전
8497	기타 불여우에서도 되는 메뉴 6 4	까만도둑	3,726	20년 전
8492	기타 불여우에서도 되는 메뉴 5 4	까만도둑	3,179	20년 전
8491	기타 불여우에서도 되는 메뉴 4	까만도둑	2,578	20년 전
8490	기타 불여우에서도 되는 메뉴 3	까만도둑	2,642	20년 전
8489	JavaScript 불여우에서도 되는 메뉴 2	까만도둑	2,551	20년 전
8487	기타 불여우에서도 되는 메뉴 1 1	까만도둑	2,839	20년 전
8484	MySQL NuxOne 2.1 배포판에 proftpd-1.2.10 설치한후 apache-2.0.52 php-5.0.3 mysql-4.1.8 설치하기 2	damoa.biz	3,014	20년 전
8483	기타 [PHP 기초] 2차원 배열의 내용 임의 출력하기	짱이	5,275	20년 전
8482	기타 [PHP 기초] 배열에 임의 값 채우기	짱이	3,886	20년 전
28459	HTML document.all("Object명") vs document.getElementsByName("Object명") 1	관리자	4,928	20년 전
8481	JavaScript 셀렉트박스와 레이어가 겹칠시 레이어가 셀렉트 박스 뒤로 숨는 현상을 해결하는 함수	관리자	6,184	20년 전
8478	기타 [PHP 기초] 달력 만들기 2	짱이	7,308	20년 전
8477	기타 [PHP 기초] 구구단표 만들기	짱이	18,410	20년 전
8475	PHP 정규식 (Regular Expression Functions) 1	관리자	6,857	20년 전
8474	MySQL MySQL 3.23.x에서 4.0.x로 업그레이드시 주의사항	관리자	2,854	20년 전
8473	기타 사용자 계정 및 계정 관리	관리자	4,112	20년 전
8472	JavaScript RH7.3 설치후 해주어야 할것들	prosper	2,461	20년 전
8471	PHP Apache1.3.xx버전 설치후 httpd.conf 설정	prosper	4,278	20년 전
8469	기타 (자작)shell 프로그래밍으로 한꺼번에 많은 유저 생성하기 1	아우겐나이스	2,872	20년 전
8468	기타 한번만 submit 되게 합니다	예진맘	2,229	20년 전
8467	기타 영문자나 숫자만 입력 할 수 있습니다	예진맘	2,450	20년 전
8466	기타 현재 페이지 이메일로 보내는 버튼 만들기	예진맘	2,205	20년 전
8465	JavaScript 원하는 사람에게 메일 보내기 버튼 만들기	예진맘	2,536	20년 전
8464	기타 특정 파일형태만 업로드 할 수 있습니다	예진맘	1,711	20년 전
8463	기타 뒤에 붙는 불필요한 공백 문자열을 없애줍니다	예진맘	1,546	20년 전
8462	기타 앞에 붙는 불필요한 공백문자열을 지워 줍니다	예진맘	1,598	20년 전
8461	기타 탭키 대신 엔터키를 눌러 이동합니다	예진맘	2,094	20년 전
8460	JavaScript 전송버튼에 '전송중...' 이라는 표시를 해 줍니다	예진맘	1,848	20년 전
8459	기타 입력 문자열 앞에 붙는 공백 제거하기	예진맘	2,354	20년 전
8458	기타 엔터키를 누르면 다음 입력상자로 이동합니다	예진맘	3,544	20년 전
8457	기타 버튼으로 텍스트영역의 크기를 제어합니다	예진맘	1,539	20년 전
8456	JavaScript 텍스트 필드에 디폴트 메세지를 보여주고 클릭하면 사라집니다	예진맘	1,733	20년 전
8455	JavaScript 특정일(ex 30일)이 지난 파일 삭제 및 디렉토리 이동하기	root	3,148	20년 전
8452	MySQL cron [퍼옮] 2	예진맘	2,324	20년 전
8451	MySQL mysql에서의 subquery	예진맘	3,151	20년 전
8449	MySQL 여러데이터베이스 사용하는 방법 - 퍼옮 1	예진맘	2,855	20년 전
28458	HTML 문자열 연결 CONCAT()	예진맘	3,283	20년 전
8445	MySQL MySQL SELECT 문 - php와 관련하여 3	예진맘	5,096	20년 전
8444	MySQL 패스워드 변경 및 루트 패스워드 찾기	예진맘	2,497	20년 전
8443	MySQL MySQL 설치	예진맘	4,796	20년 전
8442	MySQL mysql 루트(root) 암호를 잊었을 경우 [퍼옮]	예진맘	2,477	20년 전
8441	MySQL MySQL 컬럼 형 [퍼옮]	예진맘	3,088	20년 전
8440	MySQL MySQL 연산자 ( 사칙연산, 비트연산, 논리연산 ) [퍼옮]	예진맘	7,594	20년 전
8439	MySQL MySQL 내부연산 ( 비교연산 )	예진맘	3,801	20년 전
8438	MySQL MySQL 연산자 ( 형변환, 컨트롤함수 )[퍼옮]	예진맘	3,189	20년 전
8437	MySQL MySQL 함수정리 ( 수학함수 ) [퍼옮]	예진맘	4,671	20년 전
8436	JavaScript GROUP BY 와 같이 사용되는 함수 [퍼옮]	예진맘	2,875	20년 전
8435	MySQL MySQL 문자열 관련함수[퍼옮]	예진맘	6,202	20년 전
8433	MySQL MySQL 날짜 관련 함수[퍼옮] 1	예진맘	4,459	20년 전
8428	MySQL MYSQL Query의 간단한 사용법 [퍼옮] 4	예진맘	5,764	20년 전
8427	MySQL 자주 사용하는 Mysql Query문(php와 관련하여)	예진맘	3,609	20년 전
8426	MySQL MySql 기본명령어 모음[콘솔사용시]	예진맘	5,946	20년 전
28456	HTML 다중 파일들을 하나의 db필드 및 프로그램으로 제어하기 1	예진맘	3,087	20년 전
8425	JavaScript 유효 도메인 책크하기	예진맘	2,813	20년 전
8424	기타 기타 알아두어야 할 함수 [퍼옮]	예진맘	2,608	20년 전
8423	기타 변수 및 수학 관련함수 [퍼옮]	예진맘	2,416	20년 전
8422	기타 URL 관련함수 [퍼옮]	예진맘	2,621	20년 전
8421	기타 파일 관련함수 [퍼옮]	예진맘	2,647	20년 전
8419	기타 문자열 처리함수 [퍼옮] 1	예진맘	3,772	20년 전
8418	기타 날짜 및 시간 관련함수 [퍼옮]	예진맘	2,797	20년 전
8417	PHP 미리 정의된 변수들 [퍼옮]	예진맘	2,436	20년 전
28455	HTML 디렉토리 관련함수 [퍼옮]	예진맘	2,238	20년 전
8416	MySQL 문자열 함수 - 퍼 옮 -	예진맘	3,036	20년 전
8415	JavaScript 배열함수	예진맘	3,105	20년 전
8414	기타 preg_match_all()	예진맘	2,479	20년 전
8412	JavaScript mktime() 1	예진맘	2,567	20년 전
28454	HTML setcookie	예진맘	2,944	20년 전
8411	PHP array_rand()	예진맘	2,294	20년 전
28451	HTML eregi() vs ereg() 2	예진맘	2,728	20년 전
8410	JavaScript strrchr()	예진맘	2,097	20년 전
8409	기타 key()	예진맘	2,327	20년 전
8406	JavaScript GetImageSize() 2	예진맘	2,667	20년 전
8405	JavaScript 리눅스 서버의 시간이 맞지 않을때?	prosper	2,322	20년 전
28450	HTML man 페이지 txt파일로 저장하기	prosper	2,138	20년 전
8404	기타 키보드의 방향키로 윈도우의 위치를 이동시킵니다	카이루	2,151	20년 전
8403	기타 이동식 메뉴 박스	카이루	2,304	20년 전
8402	기타 오늘은 어딜 가볼까? 콤보상자 회전후 이동하기	카이루	1,907	20년 전
8401	기타 마우스 대신 키보드를 눌러 원하는 곳으로 이동합니다	카이루	1,906	20년 전
8400	JavaScript 체크박스를 클릭하면 이동하는 체크박스 메뉴 스크립트	카이루	2,112	20년 전
8399	기타 select 으로 이동하기 사이트 이동 소스	카이루	2,342	20년 전
8391	기타 책장을 넘기는 것같은 이미지 슬라이드 쇼 스크립트 7 현재글	카이루	4,550	20년 전
8390	기타 특정 디렉토리 또는 파일 갯수 세기	prosper	2,683	20년 전
8389	JavaScript 디렉토리 내에서 파일만 퍼미션 변경	prosper	2,089	20년 전
8387	기타 마우스를 대면 링크 이미지들을 미리 보여줍니다 1	카이루	2,152	21년 전
28447	HTML 이미지를 5단계로 키워서 보자 2	카이루	2,124	21년 전
8386	JavaScript DirectX의 와이프 기능을 사용한 이미지 스와핑 효과	카이루	2,396	21년 전
8384	기타 풀다운 콤보메뉴로 이미지들을 보여줍니다 1	카이루	2,546	21년 전
8382	JavaScript 특정 이미지를 지정한 날까지만 보여줍니다 1	카이루	1,756	21년 전
8380	기타 부드럽게 오버랩되는 이미지 슬라이드 쇼 1	카이루	4,056	21년 전
8379	기타 끊김없이 연속적으로 스크롤 되는 이미지 스크롤러 스크립트	카이루	3,838	21년 전
8377	JavaScript iframe 써서 노 프레임 효과 내기 1	카이루	2,972	21년 전
8376	MySQL 설치Apache 1.3.29 + PHP 4.3.4 + MySQL + GD + IMAP 등등 설치	prosper	2,878	21년 전
8375	MySQL [펌] mysql 인덱싱.	관리자	5,246	21년 전

이전 다음

80 81 82 83

전체 목록