web standard/script2010. 5. 4. 15:59

슬라이드쇼+인터벌전환+카테고리연동(ie전용)

<!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>

'web standard > script' 카테고리의 다른 글

ie6에서 png처리방법  (2) 2010.05.13
pack된 js unpacker해주는 사이트  (0) 2010.05.12
ie6에서 png파일 처리방법.  (0) 2010.05.03
레이어 하나만 또는 여러개 펼침제어(갯수제한없음)  (0) 2010.03.22
레이어 온오프 제어  (0) 2010.03.22
Posted by 수라

티스토리툴바