왼쪽 및 오른쪽 화살표가 있는 이미지 캐러셀용 JS 코드

저자：Eve Cole 업데이트 시간：2025-02-23 05:00:03

회전식 그림의 효과는 아래 그림에 나와 있습니다. 회전식 메뉴를 중지하려면 그림이나 제목 위에 마우스를 올리려면 왼쪽 및 오른쪽 버튼을 클릭하세요.

렌더링은 다음과 같습니다

다음과 같이 코드 코드를 복사합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<머리>

<스타일 유형="텍스트/css">

<!--

.rollBox{width:770px;height:260px;overflow:hidden;padding:10px;margin:0 auto;border:1px 단색 빨간색;}

.rollBox .LeftBotton{높이:40px;너비:21px;배경:url(images/sl.png) 반복 없음 0px 5px;overflow:hidden;float:left;display:inline;margin:110px 0 0 0;cursor: 바늘;}

.rollBox .RightBotton{높이:40px;너비:21px;배경:url(images/sr.png) 반복 없음 0px 5px;overflow:hidden;float:left;display:inline;margin:110px 0 0 0;cursor: 바늘;}

.rollBox .Cont{너비:726px;오버플로:숨김;부동산:왼쪽;}

.rollBox .ScrCont{너비:10000000px;}

.rollBox .Cont .pic{width:242px;float:left;text-align:center;}

.rollBox .Cont .pic img{padding:9px;배경:#fff;border:1px solid #ccc;display:block;margin:0 auto;width:190px;height:190px;}

.rollBox .Cont .pic div{line-height:20px;color:#505050;margin:15px 0px;}

.rollBox .Cont .pic div 범위{디스플레이:블록;}

.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-꾸밈:none;}

.rollBox .Cont a:hover{색상:#f00;텍스트 장식:밑줄;}

.rollBox #List1,.rollBox #List2{float:왼쪽;}

-->

</style>

</head>

<본문>

<div>

<div>

<div>

<div>

</div>

<div>

<div>

</div>

<div>

<div>

</div>

<div>

<div>

</div>

<div>

<div>

</div>

<div>

<div>

</div>

<div>

<div>

</div>

<div>

<div>

</div>

</div>

</div>

</div>

</body>

<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">

<![CDATA[//><!--

//그림 스크롤 목록 VeVB.COm

var 속도 = 1; //속도 (밀리초)

var Space = 5; //매번 이동(px)

var PageWidth = 726; //페이지 너비

var fill = 0; //전체 이동

var MoveLock = 거짓;

var MoveTimeObj;

var 보상 = 0;

var AutoPlayObj = null;

GetObj("List2").innerHTML = GetObj("List1").innerHTML;

GetObj('ISL_Cont').scrollLeft = 채우기;

GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}

GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}

자동재생();

function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}

function AutoPlay(){ //자동 스크롤

ClearInterval(AutoPlayObj);

AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //간격 시간

}

function ISL_GoUp(){ //회전 시작

if(MoveLock) 반환;

ClearInterval(AutoPlayObj);

MoveLock = 사실;

MoveTimeObj = setInterval('ISL_ScrUp();',Speed);

}

function ISL_StopUp(){ //회전 중지

ClearInterval(MoveTimeObj);

if(GetObj('ISL_Cont').scrollLeft % PageWidth - 채우기 != 0){

Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);

CompScr();

}또 다른{

MoveLock = 거짓;

}

자동재생();

}

function ISL_ScrUp(){ //업 액션

if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}

GetObj('ISL_Cont').scrollLeft -= 공백 ;

}

function ISL_GoDown(){ //다운

ClearInterval(MoveTimeObj);

if(MoveLock) 반환;

ClearInterval(AutoPlayObj);

MoveLock = 사실;

ISL_ScrDown();

MoveTimeObj = setInterval('ISL_ScrDown()',Speed);

}

function ISL_StopDown(){ //거절 중지

ClearInterval(MoveTimeObj);

if(GetObj('ISL_Cont').scrollLeft % PageWidth - 채우기 != 0 ){

Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;

CompScr();

}또 다른{

MoveLock = 거짓;

}

자동재생();

}

function ISL_ScrDown(){ //아래로 스크롤 동작

if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}

GetObj('ISL_Cont').scrollLeft += 스페이스 ;

}

함수 CompScr(){

바넘;

if(Comp == 0){MoveLock = false;return;}

if(Comp < 0){ //켜기

if(Comp < -Space){

Comp += 공간;

숫자 = 공간;

}또 다른{

숫자 = -Comp;

보상 = 0;

}

GetObj('ISL_Cont').scrollLeft -= 숫자;

setTimeout('CompScr()',Speed);

}else{ //거절

if(구성 요소 > 공간){

Comp -= 공간;

숫자 = 공간;

}또 다른{

숫자 = Comp;

보상 = 0;

}

GetObj('ISL_Cont').scrollLeft += 숫자;

setTimeout('CompScr()',Speed);

}

//--><!]]>

</script>

</html>