Html & Script

[js]단순한 배너 롤링

페이지 정보

본문

좋아요 ~~

<html>
<head>
<script>
// banner_roll("div태그 id", 배너1개높이, 딜레이, 1칸이동속도, 0);
function banner_roll(div_id, banner_height, banner_delay, banner_speed, this_height)
{
    var div_tag = document.getElementById(div_id);
    var a_tag, i;
   
    this_height ++;
    if(this_height < banner_height) {
        div_tag.style.top = -this_height;
        setTimeout("banner_roll('" + div_id + "', " + banner_height + ", " + banner_delay + ", " + banner_speed + ", " + this_height + ");", banner_speed);
    } else {
        a_tag = div_tag.getElementsByTagName("A");
        div_tag.appendChild(a_tag[0]);
        div_tag.style.top = 0;
        setTimeout("banner_roll('" + div_id + "', " + banner_height + ", " + banner_delay + ", " + banner_speed + ", 0);", banner_delay);
    }

    return true;
}
</script>
</head>
<body>
<table>
<tr>
<td width="200px" height="120px">
배너 돌리기 1<br />
<div style="position:absolute; width:200px; height:60px; overflow:hidden;">
<div style="position:relative;" id="banner_1">
<a href="#" style="display:block; height:20px;">테스트1</a>
<a href="#" style="display:block; height:20px;">테스트2(이미지도 OK)</a>
<a href="#" style="display:block; height:20px;">테스트3</a>
<a href="#" style="display:block; height:20px;">테스트4</a>
<a href="#" style="display:block; height:20px;">테스트5</a>
</div>
</div>
</td>
<td width="200px">
배너 돌리기 2<br />
<div style="position:absolute; width:200px; height:120px; overflow:hidden;">
<div style="position:relative;" id="banner_2">
<a href="#" style="display:block; height:30px;">테스트1</a>
<a href="#" style="display:block; height:30px;">테스트2</a>
<a href="#" style="display:block; height:30px;">테스트3</a>
<a href="#" style="display:block; height:30px;">테스트4</a>
<a href="#" style="display:block; height:30px;">테스트5</a>
<a href="#" style="display:block; height:30px;">테스트6</a>
<a href="#" style="display:block; height:30px;">테스트7</a>
</div>
</div>
</td>
</tr>
</table>
<script>
banner_roll("banner_1", 20, 2000, 20, 0);
banner_roll("banner_2", 30, 2000, 5, 0);
</script>
</body>
</html>

관련자료

등록된 댓글이 없습니다.
Today's proverb
삶은 미래의 시간을 향해 달려가지만 그 삶을 이해하는 것은 과거의 시간을 따라 행해진다.