'childNodes'에 해당되는 글 1건

  1. 2010.05.04 슬라이드쇼+인터벌전환+카테고리연동(ie전용)
web standard/script2010. 5. 4. 15:59
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<script type="text/javascript">
/* <![CDATA[ */
curMenu = -1;
timer = 0;
goInterval = 1500;
function goMenu(menuNum) {
    var menuBox = document.getElementById('menu').childNodes;
    var contBox = document.getElementById('cont').childNodes;
    for(i=0;i<menuBox.length;i++){
        var menuItem = menuBox[i].getElementsByTagName("a")[0];
        if(i == menuNum){
            menuItem.style.color = "red";
            contBox[i].style.display = "block";
        }else{
            menuItem.style.color = "#222";
            contBox[i].style.display = "none";
        }
    }
    curMenu = menuNum;

    if (timer == 0){
        t=setTimeout("goNext();",goInterval);
        timer = 1;
    } else if (timer == 1) {
        clearTimeout(t);
        t=setTimeout("goNext();",goInterval);
    }
}
function goPrev() {
    var menuBox = document.getElementById('menu').childNodes;
    menuLink = menuBox.length - 1;
    curMenu--;
    if(curMenu < 0) {
        curMenu = menuLink;
    }
    goMenu(curMenu);
}

function goNext() {
    var menuBox = document.getElementById('menu').childNodes;
    curMenu++;
    if(curMenu == menuBox.length) {
        curMenu = 0;
    }
    goMenu(curMenu);
}
/* ]]> */
</script>
<style type="text/css">
* {list-style:none;font-size:12px;color:#333333;font-family:gulim;}
a {text-decoration:none;}
ul {float:left;}
li {float:left;margin-right:10px;height:20px;}

ul#menu li a {color:#999999;}
div#cont {}
div#cont div {display:none;}
</style>
</head>

<body>
<ul id="menu">
    <li><a href="javascript:goMenu(0);">메뉴0</a></li>
    <li><a href="javascript:goMenu(1);">메뉴1</a></li>
    <li><a href="javascript:goMenu(2);">메뉴2</a></li>
    <li><a href="javascript:goMenu(3);">메뉴3</a></li>
    <li><a href="javascript:goMenu(4);">메뉴4</a></li>
</ul>
<ul id="nav">
    <li><a href="javascript:goPrev();">이전</a></li>
    <li><a href="javascript:goNext();">다음</a></li>
</ul>
<br style="clear:both;" />
<div id="cont">
    <div>내용0</div>
    <div>내용1</div>
    <div>내용2</div>
    <div>내용3</div>
    <div>내용4</div>
</div>
<script type="text/javascript">goNext();</script>
</body>
</html>

Posted by 수라