<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>롤링 배너</title>
<style type="text/css">
#rollBanner {
position:relative;
width:150px;
height:70px;
overflow:hidden;
border:1px solid #000;
white-space:nowrap;
}
#rollBannerText {
position:relative;
width:200px;
height:50px;
overflow:hidden;
border:1px solid #000;
white-space:nowrap;
}
#rollBanner p {
position:absolute;
margin:0;
}
#rollBannerText p {
position:absolute;
margin:0;
}
</style>
<script type="text/javascript">
function rollBanner(divId,intervalTime) {
var divId = document.getElementById(divId); // Roll Div 선언
var pTag = divId.getElementsByTagName("p")[0]; // absolute P 변수 선언
var imgTag = divId.getElementsByTagName("img"); //이미지 변수 선언 (실제로 여기선 필요없음. 다 링크가 달렸기때문에..)
var textTag = divId.getElementsByTagName("a"); // 단순 Text 변수 혹은 이미지에 걸린 링크 선언
var pWidth = pTag.offsetHeight; //p태그가 가진 Width값 변수
var speed = 1; //1픽셀씩 이동
pTag.style.top = 0 + "px"; //수정불가, 위치를 옮기고 싶다면 div 자체에 margin값을 스타일로 줘야함 (p자체가 움직이는 구조)
var bannerArray = new Array(); // 배너를 롤링하기 위해 배열복사(배열까진 필요없을것 같기도함)
bannerArray[0] = pTag.innerHTML; // 배열에 P 태그가 가지고 있는 항목 저장
if (textTag.length != 0) // a 태그가 있으면 (img로 대체할수도 있겠지)
{
if (pWidth > divId.offsetHeight) //p width값이 div width 값보다 크다면 움직여라 (작은데도 움직일거면 삭제)
{
pTag.style.top = pTag.offsetTop; //absolute P태그의 left를 선언 (offset은 읽기전용이라서..)
pTag.innerHTML=pTag.innerHTML+bannerArray[0]; //일단 처음에 배너 배열을 하나 더 복사해서 길게 만듬
var rollInterval = setInterval(
function()
{
/* onmouse Event */
pTag.onmouseover = function() {
speed=0;//이동 안함
};
pTag.onmouseout = function() {
speed=1;//1픽셀씩 이동
};
pTag.style.top = parseInt(pTag.style.top)-speed + "px";//1픽셀씩 이동
if (parseInt(pTag.style.top) % pWidth==0)
/* 배너 넓이 만큼 이동했을시 */
{
pTag.innerHTML=pTag.innerHTML+bannerArray[0]; //뒤로 배너배열 하나더 추가
}
}
,intervalTime);
}
}
}
</script>
</head>
<body>
<div id="rollBanner">
<p>
<table>
<tr>
<td>
<a href="#"><img src="mainBanner1.jpg" alt="배너1" />1</a> <a href="#"><img src="mainBanner1.jpg" alt="배너1" />1 </a><br>
<a href="#"><img src="mainBanner1.jpg" alt="배너1" />2</a> <a href="#"><img src="mainBanner1.jpg" alt="배너1" /> 2</a><br>
</td>
</tr>
</table>
</p>
</div>
<script type="text/javascript">
rollBanner("rollBanner",25);
</script>
</body>
</html>
출처 : 다른 분이 찾아준 부분이어서 모름.....