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

다각형 이미지슬라이드쇼 자바스크립트 입니다.

· 9년 전 · 281

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

<BODY onload="Carousel()">

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

댓글 작성

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

로그인하기

게시글 목록

번호 제목
20097
20095
20093
20092
20091
20089
20086
20085
20084
20083
20082
28358
20081
20079
20078
20077
20076
20075
20074
20073
20072
20071
20070
20069
8148
20057
8141
24669
20056
8138
28353
20055
20054
20053
20052
20051
20050
20047
20046
20045
20044
8111
20043
20042
20040
20039
20037
20036
20035
20027
8107
31022
20026
20025
20024
20023
28350
20022
20018
20017
8099
20016
20013
8090
20012
20010
20009
19998
28348
28347
19997
19996
19995
19993
8087
8065
19990
8063
8056
19989
19988
19987
19986
19985
19984
19983
19982
8054
19981
19980
19979
19978
19977
19976
19975
19974
19973
19972
19971
19970