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

카이루

· 21년 전 · 조회 4550 4550 · 댓글 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년 전

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

게시글 목록

번호	제목	글쓴이	조회	날짜
27980	이런 네비게이션 소스 혹시 아시는분 5	삼관왕	1,665	11년 전
7164	영카트5 orderform.php 수정 관련 질문입니다.	ImSG	924	11년 전
31729	부트스트랩 Bootstrap 강좌 5. Bootstrap JS Collapse 2	신리	2,208	11년 전
31726	부트스트랩 Bootstrap 강좌 4. Bootstrap Components 2	신리	1,711	11년 전
31725	부트스트랩 Bootstrap 강좌 3. Bootstrap CSS Ref.	신리	3,792	11년 전
31720	부트스트랩 Bootstrap 강좌 2. Bootstrap Case 4	신리	2,256	11년 전
31711	부트스트랩 Bootstrap 강좌 1. Bootstrap Basic 8	신리	4,500	11년 전
7159	자바스크립트 롤오버좀 도와주세여 ㅠㅠ 4	호식이와미돌	1,268	11년 전
27974	고수님들 도와주세요 ㅠㅠ 5	호식이와미돌	1,131	11년 전
19734	PHP [알고리즘] 단순 연결 리스트를 이용한 스택(stack) 1	슈와이	1,776	11년 전
19730	PHP [알고리즘] 배열로 구현하는 스택(stack) 3	슈와이	1,746	11년 전
19729	PHP [알고리즘] 배열 역순	슈와이	1,312	11년 전
27969	도서 추천 부탁드려요~~ 4	나는웹디다	961	11년 전
7142	php 개발시에 다들 eclipse 사용하십니까? 16	멋진남자임	1,608	11년 전
19728	jQuery remove()를 이용하여 엘리먼트 삭제하기	잘살아보자	978	11년 전
19725	PHP 개발하면서 도움이 많이 되는 array 함수 extract 소개합니다 2	천국나무	1,081	11년 전
7130	php로 개발하면서 array 를 얼마 많금활용 하세요? 11	천국나무	1,297	11년 전
19722	jQuery 동일 엘리먼트 순번 알아내기 2	잘살아보자	1,111	11년 전
19719	PHP [클래스] abstract 추상클래스 2	슈와이	869	11년 전
7124	페이스북 같은 사이트를 하나 만들려면... 5	사랑한데이	2,046	11년 전
19718	jQuery width(), height() 메서드를 이용하여 가로크기, 세로 크기 알아내기	잘살아보자	1,866	11년 전
19717	jQuery offset() 메서드를 이용하여 left, top 값 set, get 하기	잘살아보자	3,037	11년 전
19716	jQuery position() 메서드 객체에 대한 좌표값	잘살아보자	1,011	11년 전
19715	jQuery closest : 선택된 요소에서 최초의 부모요소 객체를 얻어온다.	잘살아보자	777	11년 전
7122	그누보드를 사용한 사람은 쇼핑몰 제작에는 영카트가 좋을까요? 1	디스달	861	11년 전
30959	CSS css !important 의 활용 3	잘살아보자	2,751	11년 전
19714	PHP [클래스] 여러 종류의 객체를 하나의 배열로 다루기	슈와이	1,008	11년 전
31710	jQuery Mobile jQuery Mobile 강좌 19. Select Menus	신리	1,208	11년 전
31709	jQuery Mobile jQuery Mobile 강좌 18. Text Inputs	신리	711	11년 전
19713	PHP 배열에서 그룹별로 합계 구하기(group by)	슈와이	1,495	11년 전
7117	개발자님들, 슬로우쿼리 문제 좀 봐주세요!!! 4	mijaya	1,489	11년 전
19712	PHP [클래스] instanceof 인스턴스 확인	슈와이	898	11년 전
7111	서버이전을 하였는데 문제가 생겻읍니다 5	까망아이	1,079	11년 전
31708	jQuery Mobile jQuery Mobile 강좌 17. Form Basic	신리	759	11년 전
31707	jQuery Mobile jQuery Mobile 강좌 16. Filters	신리	719	11년 전
19710	PHP preg_split 를 이용한 문자열 나누기와 중복값 제거후 정렬 1	슈와이	1,549	11년 전
31706	jQuery Mobile jQuery Mobile 강좌 15. List Content	신리	886	11년 전
31705	jQuery Mobile jQuery Mobile 강좌 14. List Views	신리	794	11년 전
31704	jQuery Mobile jQuery Mobile 강좌 13. Layout Grids	신리	901	11년 전
19709	PHP 중복된 값 중 한개만 제거 2번째 이야기	잘살아보자	1,086	11년 전
19707	PHP 중복된 값 중 제일 처음에 있는 값만 제거하기 1	잘살아보자	731	11년 전
31703	jQuery Mobile jQuery Mobile 강좌 12. Tables	신리	778	11년 전
19706	jQuery class가 있는지 없는지 체크하기	잘살아보자	1,291	11년 전
31702	jQuery Mobile jQuery Mobile 강좌 11. Collapsibles	신리	817	11년 전
19705	PHP 배열에서 중복 값 없애기	잘살아보자	1,314	11년 전
31701	jQuery Mobile jQuery Mobile 강좌 10. Panels	신리	808	11년 전
19704	PHP [클래스] Singleton 싱글톤	슈와이	976	11년 전
31700	jQuery Mobile jQuery Mobile 강좌 9. Navigation Bars	신리	1,004	11년 전
31699	jQuery Mobile jQuery Mobile 강좌 8. Toolbars	신리	755	11년 전
31698	jQuery Mobile jQuery Mobile 강좌 7. Popups	신리	784	11년 전
7107	모바일 웹 연동 웹앱에서 본인인증 후 경로 질문입니다.. 3	싱글탱글	1,017	11년 전
19703	JavaScript str_pad 자릿수만큼 특정문자로 채우기	슈와이	1,951	11년 전
31697	jQuery Mobile jQuery Mobile 강좌 6. Icons	신리	784	11년 전
31696	jQuery Mobile jQuery Mobile 강좌 5. Buttons	신리	794	11년 전
19702	PHP [클래스] Overloading 오버로딩2	슈와이	735	11년 전
19701	PHP [클래스] Overloading 오버로딩1	슈와이	1,149	11년 전
31695	jQuery Mobile jQuery Mobile 강좌 4. Transitions	신리	801	11년 전
27965	포커싱에 맞게 오브젝트가 보여지는 방법 문의요! 3	김우너석	709	11년 전
31694	jQuery Mobile jQuery Mobile 강좌 3. Pages	신리	1,040	11년 전
19700	PHP 날짜 문자 1분 전, 1시간 전, 1일 전 표시	레어닉	1,362	11년 전
31693	jQuery Mobile jQuery Mobile 강좌 2. Install	신리	995	11년 전
19699	PHP [클래스] 포함관계를 통한 다중상속(?)	슈와이	920	11년 전
31692	jQuery Mobile jQuery Mobile 강좌 1. Introduction	신리	965	11년 전
31691	jQuery Mobile jQuery Mobile 강좌 0.home	신리	1,797	11년 전
19698	PHP [클래스] __construct 조상클래스의 생성자	슈와이	867	11년 전
19697	PHP [클래스] Overriding 오버라이딩	슈와이	926	11년 전
19696	jQuery 마우스 오버 위치에 따라 툴팁 생성 및 자동 이동	잘살아보자	2,703	11년 전
19694	jQuery animate 사용법 및 animate가 중복 될 경우 처리 하는 방법 1	잘살아보자	2,250	11년 전
19693	jQuery 제이쿼리 동적으로 생성된 객체에 이벤트 생성하기	잘살아보자	1,137	11년 전
19692	jQuery 제이쿼리 bind, unbind 이벤트 생성, 해제하기	잘살아보자	1,626	11년 전
19691	PHP php, 강제로 에러 출력하게 하기	잘살아보자	1,237	11년 전
19690	JavaScript shuffle 배열섞기	슈와이	1,152	11년 전
19689	jQuery 제이쿼리 모음 사이트	잘살아보자	1,285	11년 전
19688	PHP 1원팁] IP 대역 비교	잘살아보자	1,888	11년 전
19687	PHP [클래스] Interface 인터페이스	슈와이	926	11년 전
7105	네이버/다음 캘린더 외부 삽입은 막혀있나요? 1	그누5입문	1,931	11년 전
30955	CSS sprite 이미지를 css코드로 변환해주는 웹도구 3	우산11	2,159	11년 전
7100	전혀 다른 시스템의 DB이전 어떻게 처리 하시나요? 4	Terrorboy	855	11년 전
19681	PHP input 쉽게 관리하기 5	레어닉	1,000	11년 전
7097	작업은 어느정도 되가나요? 에 어떻게 대답을 해야될까요? 2	클베	709	11년 전
19678	JavaScript 서버시간을 사용한 전자시계 2	슈와이	1,672	11년 전
7089	Sphinx search 적용 후기 7	진서기	1,541	11년 전
7086	서브도메인 설정 도움이필요합니다 ㅜㅜ 2	sogo87	1,027	11년 전
7084	여쭤봅니다. 어디서 검색해오는지 1	쥬드로옹	909	11년 전
7082	제발 도와주세요 1	꿈의세계	684	11년 전
19677	PHP [함수] 1원 팁 - fwrite() 함수 관련	잘살아보자	1,064	11년 전
30953	기타 영역 스크롤 질문드립니다. 1	별이님	1,517	11년 전
7080	html언어에서요,폰트를 일정 사이클로 바꿔주고 싶은데 어떻게해야하나요? 1	presee	586	11년 전
7077	홈페이지 주소 설정 문의입니다.. 2	sogo87	777	11년 전
7071	테이블 태그 관련 문의 5	빅맨	856	11년 전
7070	chart 관련 javascript framework	브라이언2	877	11년 전
7066	귀차니즘은 개발자를 발전하게 만든다. 3	Terrorboy	1,079	11년 전
19676	JavaScript 구글 웹사이트 번역기를 내 사이트에 달기	위토즈	2,613	11년 전
19674	웹서버 htaccess를 이용하여 짧은주소 및 url 주소 리다이렉션하기 1	잘살아보자	2,271	11년 전
27961	움직이는 퀵메뉴 하단에 닿기 전에 멈추는 방법이 있을까요? 3	dethos79	1,834	11년 전
7063	SSL 적용하면 속도가 혹시 & 질문2개 2	멋진남자임	1,394	11년 전
7061	PHP 의 5.6 메인 브랜치의 정식 버전이 출시 1	카이루	1,337	11년 전
19669	jQuery input value 값 1씩 한꺼번에 증가시키기 4	열매	2,309	11년 전
7060	안드로이드 UI 노과다	컴대장	1,573	11년 전
20842	도로명주소 juso.sir.co.kr 도로명 주소 검색 시스템 구축 가이드 - 전체파일 7	편리	2,774	11년 전

이전 다음

8 9 10 11 12

전체 목록