游戏TAB滚动效果

WEB入门实践视频课：https://edu.csdn.net/course/detail/8502

第一步：设计页面

Tab效果
		

			
			

				
				

					佳片有约
				

				

					电视连载
				

				

					戏曲频道
				

				

					国际时事
				

				

					少儿动画
				

			

			

				
				

					
				

				

					
				

				

					
				

				

					
				

				

					
				

			

		

第二步：CSS样式设计：

ul{
	list-style: none;width:385px;height: 16px;
}
#tab1,#tab2,#tab3,#tab4{
	width:76px;height: 30px;
	float:left;margin-right: -1px;
	text-align: center;
	line-height: 30px;
	font-weight: bold;
	font-size: 13px;
	border: 1px solid blue;	
}
#content{
	margin-left: 20px;
}
img{width:385px;height: 385px;;}

第三步：JS动态设计，控制CSS和HTML元素

//定义变量，帮助实现自动轮换;
var index=1;
function $(id){return document.getElementById(id);}
function show(id){
	//获得事件的主要对象;
	var tab=$('tab'+id);
	var ct=$('ct'+id);
	//改变tab元素的样式；  显示选中的tab内容;
	for(var i=1;i<=5;i++){
		if(i!=id){
			$('ct'+i).style.display='none';
		}
	}
	ct.style.display='block';
	index=id;
}
//图片自动轮换的方法;
function autoTab(){
	if(index==6)index=1;  //到头了，从新开始;
	show(index);
	index++;
	
	setTimeout('autoTab()',1000);
}
window.onload=autoTab;

第四步：效果