淘宝首页自动切换选项卡变换内容

<! 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 >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 无标题文档 </ title >
</ head >
< style  type ="text/css" >
body{}{ margin:0; padding:0; border:0; font-size:12px}
div,ul,li{}{ margin:0; padding:0; border:0}
li{}{ list-style:none}
.m{}{ margin:20px; width:338px}
#rolinTab{}{ float:left; border-top:1px solid #ccc}
#rolinTab li{}{ margin-top:-1px;width:35px; border:1px solid #ccc; margin-bottom:5px; line-height:22px; text-align:center; border-right:none; cursor:pointer}
#rolinData{}{ float:right; width:280px; border:1px solid #ccc; height:130px; margin-left:-1px; padding:10px}
</ style >
< script  type ="text/javascript" >
var $ = function ($) {return document.getElementById($)}
function getFirstChild(obj) {
    var result = obj.firstChild;
    while (!result.tagName) {
        result = result.nextSibling;
    }
    return result;
}
function getNextChild(obj) {
    var result = obj.nextSibling;
    while (!result.tagName) {
        result = result.nextSibling;
    }
    return result;
}
function rolinTab(tab,data,index) {
    var tabList = $(tab).getElementsByTagName("LI");
    var selectItem = index? index - 1 : 0;
    var interval;
    
    var dataList = new Array();
    var tmp = null;
    for (var i=0; i<tabList.length; i++) {
        tmp = i == 0 ? getFirstChild($(data)):getNextChild(tmp);
        dataList.push(tmp);
        
        tabList[i].i = i;
        tabList[i].onclick = function() {
            if (selectItem != this.i) {
                var oldItem = selectItem
                selectItem = this.i;
                changeItem(oldItem);
            }
        }
        if (i != selectItem) dataList[i].style.display = "none";
        
    }
    $(tab).parentNode.onmouseover = function() {
        clearInterval(interval);
    }
    $(tab).parentNode.onmouseout = function() {
        interval = setInterval(change,1000)
    }
    changeItem();
    interval = setInterval(change,1000)
    
    function change() {
        var oldItem = selectItem
        selectItem++;
        if (selectItem > tabList.length -1) selectItem = 0;
        changeItem(oldItem);
    }
    
    
    function changeItem(old) {
        if (old != null) {
            tabList[old].style.borderRight = "none";
            tabList[old].style.cursor = "pointer";
            tabList[old].style.color = "#000";
            dataList[old].style.display = "none";
        }
        tabList[selectItem].style.borderRight = "1px solid #fff";
        tabList[selectItem].style.cursor = "nomorl";
        tabList[selectItem].style.color = "#f60";
        dataList[selectItem].style.display = "block";
    }
    
    
    
    
    
}
window.onload = function() {
    rolinTab("rolinTab","rolinData",1)
}
</ script >
< body >
< div  class ="m" >
< div  id ="rolinData" >
         < div > 美女 </ div >
         < div > 美男 </ div >
         < div > 美狗 </ div >
         < div > 美猫 </ div >
         < div > 美猪 </ div >
     </ div >
     < ul  id ="rolinTab" >
         < li > 美女 </ li >
         < li > 美男 </ li >
         < li > 美狗 </ li >
         < li > 美猫 </ li >
         < li > 美猪 </ li >
     </ ul >
    
</ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/CB/archive/2008/03/20/1114230.html