游戏TAB滚动效果

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

第一步:设计页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Tab效果</title>
		<link href="../css/tab.css" rel="stylesheet" type="text/css" />
		<script src="../js/tab.js"></script>
	</head>
	<body>
		<!--设计外部的布局效果-->
		<div id="outer">
			<ul>
				<li id="tab1" οnmοuseοver="show(1)">佳片有约</li>
				<li id="tab2" οnmοuseοver="show(2)">电视连载</li>
				<li id="tab3" οnmοuseοver="show(3)">戏曲频道</li>
				<li id="tab4" οnmοuseοver="show(4)">国际时事</li>
				<li id="tab4" οnmοuseοver="show(5)">少儿动画</li>
			</ul>
			<div id="content">
				<div id="ct1"><img src="images/bg1.jpg"/></div>
				<div id="ct2"><img src="images/bg2.jpg"/></div>
				<div id="ct3"><img src="images/bg3.jpg"/></div>
				<div id="ct4"><img src="images/bg4.jpg"/></div>
				<div id="ct5"><img src="images/bg5.jpg"/></div>
			</div>
		</div>
	</body>
</html>

第二步: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.οnlοad=autoTab;

第四步:效果

发布了805 篇原创文章 · 获赞 662 · 访问量 131万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览