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

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

카이루
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 21년 전 · 4556 · 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년 전
페이지 순서가 ??? 페이지 순서대로 넘길수 있도록 도와주세요...

게시글 목록

번호 제목
28772
HTML 오늘 날짜와 요일 넣기 1
10555
기타 마우스 드래그로 텍스트 선택을 금지 합니다
10554
JavaScript 홈에 머문시간을 제목표시줄과 상태바에 실시간으로 알려줍니다
10553
기타 랜덤 듀레이션 효과 - 페이지 들어오고 나갈때 벗겨지는 효과 보여주기
28770
HTML 창의 사이즈 변경 금지 시키기 1
28769
HTML 손님의 방문 횟수를 알려 줍니다
10552
기타 이미지나 버튼 클릭시 생기는 점선 없애기..다 아시는 내용일지도..ㅋㅋ
10551
기타 다양한 자바스크립트 버튼 들
28768
HTML 자바스크립트 버튼에 링크 걸기
10550
기타 마우스 커스 이동만으로 배경색상을 바꾸어보자
10549
JavaScript 들어올때나 나갈때나 인사는 착실히 해야죠..ㅋㅋㅋㅋ
10548
기타 들어올때, 나갈때 지겹도록 인사하는 스크립트
10547
기타 마우스를 대면 텍스트박스의 텍스트를 모두 선택하는 스크립트
28767
HTML 이름을 물어보고 인사하는 스크립트
10546
기타 웹문서에 주소창 넣기 스크립트
10545
JavaScript 창을 열면 인사하는 간단한 스크립트
10544
기타 가짜 바이러스 경고 하는 스크립트
28766
HTML 폼 버튼을 클릭하면 경고 메세지 보내기
10541
기타 메일주소 변조는 no, SPF(Sender Policy Framework)기술에 대해 2
10540
Flash Ajax강의- 첫번째 강의의 pdf중 발표문건 11-20
10538
Flash Ajax강의- 첫번째 강의의 pdf중 발표문건 1
10537
기타 순발력테스트
10535
Flash Ajax강의 1
10534
JavaScript named -- dns서버
10533
JavaScript 문서내 이미지갯수 출력
10532
기타 form의 readonly 와 disabled의 특징
28760
HTML 포토샵 작업 중에 잘되던 한글 입력이 갑자기 안될때 있으시죠? 5
10531
기타 접속자환경체크--중복일지모름
10530
JavaScript 리눅스 부팅후 자동 실행
28759
HTML 버튼에 스타일주기(익스)
10527
기타 자바스크립트 이벤트객체 2
10525
기타 리눅스 우분투 불여우에서 동영상보기 1
10523
기타 swish 서브메뉴 소스입니다. 1
10520
Flash swish 서브메뉴 제작방법 2
28758
HTML 오른쪽마우스클릭시메뉴(익스전용)
28757
HTML 오른쪽마우스클릭시메뉴(익스전용)
10519
기타 리눅스 명령의 모음이라는데 -_-
10518
MySQL mysql 자동 최적화 / 복구 스크립트
10517
JavaScript 내용 복사해서 붙어넣기 하면 출처까지가 따라서 나옴 (출처:네이버 소스)
10515
JavaScript ncftp사용법 1
28756
HTML 영카트에서 카테고리 검색하기
10514
Linux 사용자 그룹 명령어 + 커널버젼체크 + 리눅스장시간 미사용시
10512
기타 방금 콘솔에서 지나간 화면을 스크롤 1
10511
JavaScript 영어철저가 의심스러울때
10510
JavaScript 로그인할때 나오는 메시지 바꾸기
10509
기타 배경을 textarea에 넣어보자
10508
기타 SHIFT, CTRL, ALT 키를 막는 방법
10507
기타 리눅스의 터미널 색상 변경
28755
HTML 자바스크립트로 url 획득
28751
HTML 포&#49406; 팁강좌입니다...퍼온 것입니다. 3
10506
JavaScript 파일을 엑셀 혹은 워드로 다운 받기
10505
기타 테이블 글 입력시 넘치지 않게
10504
JavaScript 테이블속성연습
10503
기타 SSH + rsync 로 백업/밀러링 하기
10499
기타 스크롤 갤러리 올립니다. 3
10487
PHP GD 없이 한줄텍스트 이미지 php소스 creator 11
28748
HTML 투명도조절 2
10486
기타 [펌] linux - yum.conf setting
28747
HTML textarea에 입력된 길이만큼 게이지로 표현
10484
JavaScript 날짜 계산하기 1
10483
기타 폼필드로 바탕색상조정
10482
기타 내 홈페이지가 다른 사이트의 프레임에 갇히는 것을 막기
28746
HTML 버튼 하나로 링크두개를 열어보자
10480
JavaScript 접속시도를 여러번 하는 IP 자동 블락하기 1
10476
기타 해상도에 관계없이 가운데에 새창 3
10473
JavaScript 팝업창.. 지정한 시간대에 열기 2
10472
기타 한글 영문으로 변환
28745
HTML [펌]다중 업로드
10460
기타 여성일러 소스입니다 ~필요하신분들 쓰세요 11
10456
기타 흑백이미지에서 부분적으로 칼라로 적용하기. 3
28739
HTML 포토샵에서 제가 간단하게 쓰는 점선 쓰는 방법입니다 5
10455
기타 event.keycode
28738
HTML register_globals = on /off 차이점
10451
기타 AJAX 프로그래밍 무료 온라인 강좌 3
10448
기타 폼테그쓸때 테이블정렬이 잘안될때 쓰이는 css 2
10446
JavaScript font-weight 숫자로도 가능 1
10445
JavaScript 에디터 수정해서 쓰세요!
10444
기타 리사이즈 팝업
10442
기타 dns서버가 없는경우 sendmail의 주의점 1
10439
JavaScript 배경음악 또는 배경이미지 등 브라우저를 열고 처음 접속시 한번만 실행 2
10408
Flash 무료 플래시 209개 30
10403
기타 [아이디어] 다른 사이트로 이동시, 창 닫을 시, 자동 로그아웃 4
10400
JavaScript 문서내에 글씨 찾기 2
10398
기타 [외국에서펌]버튼이 아래로 내려가는... 1
10397
기타 퍼온건데요 DHTML게시판에 쓸만한거요
10396
JavaScript ssh dictionary attack 막기
10391
기타 다음 <input type=text로 커서 옮기기 4
10390
기타 한글 문자열 자르기 입니다. ^^
28733
HTML 밑의 갤러리 압축 화일 4
10389
JavaScript 까만도둑님께서 플래쉬 갤러리가 필요하시다고 해서...
10383
기타 포토샵 좋은 팁 18가지 5
10378
Flash 플래시에서 tabIndex 적용하기 4
28732
HTML getElementById와 getElementsByName
10342
Flash 간단하지만 유용한 배너관리 시스템 35
28731
HTML [소개] smtp를 이용하여 mail 보내기
10335
Flash 플래시 자동 슬라이더 6
28730
HTML cart클래스2
28729
HTML cart클래스1
28727
HTML 비교 복사 1
10332
기타 제가 쓰고 있는 css 입니다. 2
이전 다음
전체 목록