<!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}
bodydiv,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>