왼쪽이동시에는 정상으로 보이는데 오른쪽이동시에는 마지막 한칸이 안나오는 오류를 질문드립니다. ㅠㅠ
좌측으로 스크롤링 되는 버튼은 정상작동을 하는데
오른쪽으로 이동하는 버튼 또는 자동 스크롤에서는 한칸이 비어 보이는 현상이 있습니다.
고수분들의 도움을 요청드립니다. ㅠㅠ
<html>
<head>
<title>sub_content02</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language=javascript>
<!--
var downLayerId;
var dropDegree = 50; //스크롤 속도
var doDirect;
var DirectTerm = 2000; //스크롤 지연시간
var curDropIdx = 1;
function DirectDown()
{
clearInterval(doDirect);
clearInterval(downLayerId);
for(i = curDropIdx ;i < document.all["DropHit"].length + curDropIdx;i++){
document.all["DropHit"][i%document.all["DropHit"].length].style.posLeft = document.all["DropHit"][i%document.all["DropHit"].length].style.posWidth * (-1*((i-curDropIdx)%document.all["DropHit"].length));
}
var temp = 'setInterval("DownLayer()",20)';
downLayerId = eval(temp);
direction = "down";
}
function DownLayer()
{
if(document.all["DropHit"][curDropIdx].style.posLeft < document.all["DropHit"][curDropIdx].style.posWidth){
for(j = curDropIdx ;j < document.all["DropHit"].length + curDropIdx;j++){
document.all["DropHit"][j%document.all["DropHit"].length].style.posLeft += dropDegree;
}
}else{
clearInterval(downLayerId);
for(j = curDropIdx ;j < document.all["DropHit"].length + curDropIdx;j++){
document.all["DropHit"][j%document.all["DropHit"].length].style.posLeft = document.all["DropHit"][j%document.all["DropHit"].length].style.posWidth *((-1*((j-curDropIdx)%document.all["DropHit"].length))+1);
}
curDropIdx = (curDropIdx + 1) ;
curDropIdx = curDropIdx > document.all["DropHit"].length-1 ? curDropIdx%document.all["DropHit"].length:curDropIdx;
var temp = 'setInterval("DirectDown()",DirectTerm)';
doDirect = eval(temp);
}
}
function DirectUp()
{
clearInterval(doDirect);
clearInterval(downLayerId);
var tempIdx = 0;
for(i = 0;i<document.all["DropHit"].length;i++){
tempIdx = (document.all["DropHit"].length + curDropIdx - i) %document.all["DropHit"].length;
document.all["DropHit"][tempIdx].style.posLeft = i*document.all["DropHit"][tempIdx].style.posWidth;
}
var temp = 'setInterval("UpLayer()",20)';
downLayerId = eval(temp);
direction = "up";
}
function UpLayer()
{
var tempIdx = 0;
if(document.all["DropHit"][curDropIdx].style.posLeft < document.all["DropHit"][curDropIdx].style.posWidth && document.all["DropHit"][curDropIdx].style.posLeft > document.all["DropHit"][curDropIdx].style.posWidth * (-1)){
for(j = 0 ;j < document.all["DropHit"].length;j++){
tempIdx = (document.all["DropHit"].length + curDropIdx - j) %document.all["DropHit"].length;
document.all["DropHit"][tempIdx].style.posLeft -= dropDegree;
}
}else{
clearInterval(downLayerId);
for(j = 0;j<document.all["DropHit"].length;j++){
tempIdx = (document.all["DropHit"].length + curDropIdx - j) % document.all["DropHit"].length;
document.all["DropHit"][tempIdx].style.posLeft = (j-1)*(document.all["DropHit"][tempIdx].style.posWidth);
}
curDropIdx = (curDropIdx - 1) ;
curDropIdx = curDropIdx < 0 ? document.all["DropHit"].length-1:curDropIdx;
var temp = 'setInterval("DirectUp()",DirectTerm)';
doDirect = eval(temp);
}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="1200" height="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="1200" height="300" colspan="3">
<div style="left:20px; overflow:hidden; width:1161px; position:relative; top:0px; height:300px">
<div id=DropHit style="width:387px; height:300px; position:absolute; left:0px; top:0px; z-index:1; visibility:visible;">
<table border=0 cellpadding=0 cellspacing=0 width=375>
<tr>
<td bgcolor="#00CC99"> <img src="1.jpg" width="387" height="235"></td>
</tr>
</table>
</div>
<div id=DropHit style="width:387px; height:300px; position:absolute; left:387px; top:0px; z-index:1; visibility:visible;">
<table width=375 border=0 cellpadding=0 cellspacing=0 bgcolor="#99CC00">
<tr>
<td> <img src="2.jpg" width="387" height="235"></td>
</tr>
</table>
</div>
<div id=DropHit style="width:387px; height:300px; position:absolute; left:774px; top:0px; z-index:1; visibility:visible;">
<table border=0 cellpadding=0 cellspacing=0 width=375>
<tr>
<td bgcolor="#33CC99"> <img src="3.jpg" width="387" height="235"></td>
</tr>
</table>
</div>
<div id=DropHit style="width:387px; height:300px; position:absolute; left:1161px; top:0px; z-index:1; visibility:visible;">
<table border=0 cellpadding=0 cellspacing=0 width=375>
<tr>
<td bgcolor="#339999"> <img src="4.jpg" width="387" height="235"></td>
</tr>
</table>
</div>
<div id=DropHit style="width:387px; height:300px; position:absolute; left:1548px; top:0px; z-index:1; visibility:visible;">
<table border=0 cellpadding=0 cellspacing=0 width=375>
<tr>
<td bgcolor="#666666"> <img src="5.jpg" width="387" height="235"></td>
</tr>
</table>
</div>
<div id=DropHit style="width:387px; height:300px; position:absolute; left:1935px; top:0px; z-index:1; visibility:visible;">
<table border=0 cellpadding=0 cellspacing=0 width=375>
<tr>
<td bgcolor="#6666CC"> <img src="6.jpg" width="387" height="235"></td>
</tr>
</table>
</div>
<script language=javascript>DirectDown();</script>
</div>
</td>
</tr>
<tr>
<td width="50"> <a href="#" onclick="javascript_:DirectUp();">◀</a></td>
<td width="1000"> </td>
<td width="50"> <a href="#" onclick="javascript_:DirectDown();">▶</a></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>