이전
목록
다음
엠

다각형이미지슬라이드쇼(익스네츠)

CLUB
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 19년 전 · 2094
<HTML>
<HEAD>
<TITLE>이미지 슬라이드 쑈 10 ▒ Slideshow ▒ mysesang.com ▒</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</HEAD>
<!-- <body> onload="Carousel()" 넣으세요 -->
<BODY onload="Carousel()">
<!-- <body> 와 </body>사이에 붙여 넣으세요 -->

<script type="text/javascript">

// 아래 변수들을 설정 하세요
var Car_Image_Width=185; // 이미지의 가로크기
var Car_Image_Height=185; // 이미지의 높이
var Car_Border=true; // 테두리 사용여부 (true 혹은 false)
var Car_Border_Color="white"; // 테두리 색상
var Car_Speed=4; // 책장 넘기기 속도
var Car_Direction=true; // true 혹은 false
var Car_NoOfSides=6; // 보여줄 면의 갯수 (반드시 4, 6, 8 및 12 로 설정 하세요)

/* 이미지와 링크를 설정 하세요.

4면을 보여주려면 이미지의 갯수는 최소한 2개
6면을 보여주려면 이미지의 갯수는 최소한 3개
8면을 보여주려면 이미지의 갯수는 최소한 4개
12면을 보여주려면 이미지의 갯수는 최소한 6개 가 되어야 합니다

링크를 걸지 않으려면 공백 ("") 으로 두시면 됩니다
*/
Car_Image_Sources=new Array(
"http://mysesang.com/tip/img/slide001.jpg","http://mysesang.com",
"http://mysesang.com/tip/img/slide002.jpg","http://www.naver.com",
"http://mysesang.com/tip/img/slide003.jpg","", // 링크없슴
"http://mysesang.com/tip/img/slide004.jpg","http://www.dreamwiz.com" // 마지막 라인에는 콤마가 없어요..^^
);

/***************** 아랫부분은 수정하지 마세요 **********************************/

CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

function Carousel(){
if(document.getElementById){
for(i=0;i<Car_Image_Sources.length;i+=2){
C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div=document.getElementById("Carousel");
for(i=0;i<C_HalfNo;i++){
CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);
CW_I[i].style.position="absolute";
CW_I[i].style.top=0+"px";
CW_I[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I[i].style.borderStyle="solid";
CW_I[i].style.borderWidth=1+"px";
CW_I[i].style.borderColor=Car_Border_Color}
CW_I[i].src=Car_Image_Sources[2*i];
CW_I[i].lnk=Car_Image_Sources[2*i+1];
CW_I[i].onclick=C_LdLnk;
CW_I[i].onmouseover=C_Stp;
CW_I[i].onmouseout=C_Rstrt}
CarImages()}}

function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I[i].style.left=C_LeftOffset+"px";
CW_I[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
if(Car_Direction){
CW_I[C_HalfNo]=CW_I[0];
for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
CW_I[0]=CW_I[C_HalfNo];
CW_I[0].src=Car_Image_Sources[C_CrImg];
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages()",50)}

function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
function C_Rstrt(){C_Stppd=false}
</script>


<!-- 아래의 방법으로 레이어와 이미지의 크기를 설정하세요 -->


<div id="Carousel" style="position:relative">
<img src="img/slide001.jpg" width="374" height="185">
</div>

<!--
placeholder 의 가로 :
4 면 : 1.42 * 이미지 가로 + 3
6 명 : 2 * 이미지 가로 +4
8 명 : 2.62 * 이미지의 가로 + 5
12 면 : 3.87 * 이미지의 가로 + 7
placeholder 의 높이 : 이미지의 높이+2

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

-->

</BODY></HTML><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>
#개발자팁 #개발자 #팁자료실 #javascript
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
19년 전 조회 1,668
19년 전 조회 1,943
19년 전 조회 1,948
19년 전 조회 1,938
19년 전 조회 1,859
19년 전 조회 2,659
19년 전 조회 2,474
19년 전 조회 3,615
19년 전 조회 2,739
19년 전 조회 2,719
19년 전 조회 3,557
19년 전 조회 4,768
19년 전 조회 3,117
19년 전 조회 2,951
19년 전 조회 3,502
19년 전 조회 6,429
19년 전 조회 2,344
19년 전 조회 2,147
19년 전 조회 2,109
19년 전 조회 2,155
19년 전 조회 3,335
19년 전 조회 2,408
19년 전 조회 2,085
19년 전 조회 1,790
19년 전 조회 2,237
19년 전 조회 3,514
19년 전 조회 3,364
19년 전 조회 2,074
19년 전 조회 1,638
19년 전 조회 3,317
19년 전 조회 2,204
19년 전 조회 1,760
19년 전 조회 2,988
19년 전 조회 2,121
19년 전 조회 1,993
19년 전 조회 1,966
19년 전 조회 1,925
19년 전 조회 2,356
19년 전 조회 2,775
19년 전 조회 1,923
19년 전 조회 1,678
19년 전 조회 1,677
19년 전 조회 1,636
19년 전 조회 3,359
19년 전 조회 3,061
19년 전 조회 1,801
19년 전 조회 3,570
19년 전 조회 1,984
19년 전 조회 1,628
19년 전 조회 2,095
19년 전 조회 2,244
19년 전 조회 1,804
19년 전 조회 2,489
19년 전 조회 2,131
19년 전 조회 1,741
19년 전 조회 1,930
19년 전 조회 2,187
19년 전 조회 1,951
19년 전 조회 1,739
19년 전 조회 1,797
19년 전 조회 3,297
19년 전 조회 2,150
19년 전 조회 2,012
19년 전 조회 4,514
19년 전 조회 5,133
19년 전 조회 3,308
19년 전 조회 3,047
19년 전 조회 3,643
19년 전 조회 2,180
19년 전 조회 2,539
19년 전 조회 2,835
19년 전 조회 2,903
19년 전 조회 2,507
19년 전 조회 1,768
19년 전 조회 3,557
19년 전 조회 2,122
19년 전 조회 2,532
19년 전 조회 2,590
19년 전 조회 3,033
19년 전 조회 5,358
19년 전 조회 2,637
19년 전 조회 3,474
19년 전 조회 4,401
19년 전 조회 2,668
19년 전 조회 2,609
19년 전 조회 4,198
19년 전 조회 2,896
19년 전 조회 3,125
19년 전 조회 2,359
19년 전 조회 2,362
19년 전 조회 2,149
19년 전 조회 3,440
19년 전 조회 2,251
19년 전 조회 2,940
19년 전 조회 1,894
19년 전 조회 5,449
19년 전 조회 3,709
19년 전 조회 4,467
19년 전 조회 3,203
19년 전 조회 2,681
이전 첫 페이지 다음
글쓰기