淘宝首页自动切换选项卡变换内容
<!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>
<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>