游戏TAB滚动效果
【摘要】
WEB入门实践视频课：https://edu.csdn.net/course/detail/8502
第一步：设计页面
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Tab效果</title&...
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" onmouseover="show(1)">佳片有约</li>
-
<li id="tab2" onmouseover="show(2)">电视连载</li>
-
<li id="tab3" onmouseover="show(3)">戏曲频道</li>
-
<li id="tab4" onmouseover="show(4)">国际时事</li>
-
<li id="tab4" onmouseover="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.onload=autoTab;
第四步：效果
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/103026339
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）