JS中tab页签切换以及无缝滚动

1、tab页签切换

<ul id="uls1">
	<li>新闻现场</li>
	<li>最新活动</li>
</ul>
<div id="box">
	<ul id="uls2">
		<li>生活成本飞涨，不少英国人将宠物遗弃</li>
		<li>被弃养宠物数量激增30%</li>
		<li>一只宠物狗站在一处投票站外</li>
		<li>今年第一季度</li>
		<li>给宠物狗服用镇痛药对乙酰氨基酚</li>
	</ul>
	<ul id="uls3">
		<li>一户人家拍摄的电费燃气费表</li>
		<li>今年2月英国消费者价格指数同比上涨6.2%</li>
		<li>3月同比上涨7%</li>
		<li>4月同比上涨9%，创下40年来最高纪录</li>
		<li>英国民众生活水平下降</li>
	</ul>
</div>

#uls1{list-style-type:none;}
#uls1 li{width:100px;height:30px;text-align:center;line-height:30px;float:left;}
#box{width:200px;height:200px;}
#box #uls2{list-style-type:none;}
#box #uls2 li{width:200px;height:40px;text-align:center;line-height:40px;}
#box #uls3{list-style-type:none;display:none;}
#box #uls3 li{width:200px;height:40px;text-align:center;line-height:40px;}

var uls1=document.getElementById("uls1"),
	lis=uls1.getElementsByTagName("li"),
	uls2=document.getElementById("uls2"),
	uls3=document.getElementById("uls3"),
	box=document.getElementById("box"),
	uls=box.getElementsByTagName("ul"),
	
	/*lis.οnmοuseοver=function(){
		for(var i=0;i<lis.length;i++){
			lis[i].setAttribute("bgcolor","#ccc");
			index=i;
			uls[index].style.display="block";
}
}*/
	for(var i=0;i<lis.length;i++){
		lis[i].onmouseover=function(){
			this.setAttribute("backgroundColor","#ccc");
			this.index=i;
			for(i=0;i<uls.length;i++){
				uls[i].style.display="none";	
}
			uls[index].style.display="block";
}
}

2、无缝滚动

<div id="box">
	<ul>
		<li>生活成本飞涨，不少英国人将宠物遗弃</li>
		<li>被弃养宠物数量激增30%</li>
		<li>一只宠物狗站在一处投票站外</li>
		<li>今年第一季度</li>
		<li>给宠物狗服用镇痛药对乙酰氨基酚</li>
	</ul>
</div>

*{margin:0;padding:0;}
#box{width:500px;height:50px;}
#box ul{list-style-type:none;overflow:hidden;}
#box ul li{width:150px;height:50px;line-height:50px;text-align:center;float:left;}

var box=document.getElementById("box"),
	uls=document.getElementsByTagName("ul"),
	lis=uls.getElementsByTagName("li")[0],
	li_num=lis.length,
	li_width=parseInt(getAttr()),
	index=0,
	uls.style.width=li_num*li_width+"px";
	function getAttr(){
		if(lis.currentStyle){
			return lis.currentStyle["width"];
		}else{
			return lis.getComputedStyle(lis,null)["width"];
	}
}
setInterval(function(){
	index--;
	uls.style.marginLeft=index+"px";
	if(Math.abs(index)>li_width){
		uls.appendChild(uls.firstElementChild);
		index=0;
		uls.style.marginLeft=0+"px";
	}
},50)