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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

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>

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>

</ul>

</div>

</body>

</html>