[Javascript]마우스오버시 롤링되는배너 (파폭지원)

 

<script type="text/javascript">
 var sRepeat=null;
 function doScrollerIE(dir, src, amount) {
  if (amount==null) amount=20; //속도
  if (dir=="left")
   document.all[src].scrollLeft-=amount;
  else
   document.all[src].scrollLeft+=amount;
  if (sRepeat==null)
   sRepeat = setInterval("doScrollerIE('" + dir + "','" + src + "'," + amount + ")",100);
  return false }
  window.document.onmouseout = new Function("clearInterval(sRepeat);sRepeat=null");
  window.document.ondragstart = new Function("return false");
</script>

 

다음은 왼쪽으로 가는 버튼소스입니다.

<img src="기본으로보여질버튼" id="goright01" name="arrow01" OnMouseOver="document.arrow01.src='오버했을때 보여질버튼'; return doScrollerIE('left','rolling_table',10)" OnMouseOut="document.arrow01.src='마우스아웃했을때 보여질버튼'; clearInterval(sRepeat)" style='cursor:pointer;' alt="이전" >

다음은 오른쪽으로 가는 버튼소스입니다.

<img src="기본으로보여질버튼" alt="다음" id="goright02" name="arrow02" OnMouseOver="document.arrow02.src='오버했을때 보여질버튼'; return doScrollerIE('right','rolling_table',10)" OnMouseOut="document.arrow02.src='마우스아웃했을때 보여질버튼'; clearInterval(sRepeat)" style='cursor:pointer;'>

롤링되는 내용은 다음과 같습니다.

 

<div id="rolling_table">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>롤릴될 내용</td>
</tr>
</table>
</div>

해당 css 에 #rolling_table {overflow:hidden; width:730px;} 이런식으로 삽입합니다.
가로사이즈가 730px 이후부터는 보여지지않게 되며, 버튼 오버시 롤링되게 됩니다.

버튼위치와 내용은 디자인에 맞게 맞추시면 됩니다.