浅谈tab选项卡制作思想

最新推荐文章于 2024-04-19 10:18:52 发布

super微

最新推荐文章于 2024-04-19 10:18:52 发布

阅读量306

点赞数

分类专栏： web前端文章标签： tab javascript index setInterval

本文链接：https://blog.csdn.net/u010289760/article/details/49990829

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这两天一直在制作tab选项卡，今天终于准确快速的制作出一个tab选项卡。在这说一下我制作的思想流程。

<!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>
<style type="text/css" >
*{
margin:0;
padding:0;
list-style:none;
}
.wrap{
position:relative;
width:320px;
height:240px;
overflow:hidden;
margin:100px auto;
}
.wrap ul{
position:relative;
}
.wrap ul li{
width:320px;
height:240px;
overflow:hidden;
}
.wrap ol{
position:absolute;
right:5px;
bottom:10px;

}
.wrap ol li{
width:20px;
height:20px;
border:solid 1px #FF33CC;
background:#CC99CC;
color:#0099FF;
float:left;
margin-left:5px;
text-align:center;
}
.wrap li.on{
background:#663366;
color:#FF3333;
cursor:pointer;
}
</style>
<script>
window.οnlοad=function(){
var wrap=document.getElementById('wrap'),
pic=document.getElementById('pic'),
list=document.getElementById('select').getElementsByTagName('li'),
timer=null,
index=0;
function auto(){
timer=setInterval(function(){
index++;
if(index>=list.length){
index=0;
}
change(index);
},2000);
}
auto();

function change(curindex){
pic.style.marginTop=-240*curindex+'px';
for(i=0;i<list.length;i++){
list[i].className='';
}
list[curindex].className='on';
index=curindex;
}

wrap.οnmοuseοver=function(){
clearInterval(timer);
}
wrap.οnmοuseοut=auto;

for(var n=0;n<list.length;n++){
list[n].id=n;
list[n].οnmοuseοver=function(){
change(this.id);
}
}
}
</script>
</head>

<body>
<div class="wrap" id="wrap">
<ul id="pic">
<li><img src="image/shanghai1.JPG" width="320px"height="240px"></li>
<li><img src="image/shanghai2.JPG" width="320px"height="240px"></li>
<li><img src="image/shanghai3.JPG" width="320px"height="240px"></li>
<li><img src="image/shanghai4.JPG" width="320px"height="240px"></li>
<li><img src="image/shanghai5.JPG" width="320px"height="240px"></li>
</ul>

<ol id="select">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>

</ol>
</div>
</body>
</html>

第一步：首先用html写结构（代码绿色部分），结构很简单用一个无序列表ul，存放图片，有序列表ol存放图片的数字。

第二步：css样式（红色部分）。在此注意几点，溢出处理，overflow=hidden；绝对定位absolute和相对定位热lative。将最外层的div层设为relative，因为后面有两个地方用到绝对定位，ul设一个绝对定位，这样可以通过pic.style.marginTop=-index*height(图片的height)；ol绝对定位，这样可以使ol相对wrap定位，将ol定位iezai左下角。

第三步：js行为层，要实现的功能有自动切换图片；鼠标滑过wrap层图片停止切换；鼠标移出继续切换；鼠标滑过ol中的第几个li时则显示对应的图片，鼠标移开，则继续从刚刚滑过的li标签的下一个开始切换。

用下划线表示出应该注意的几个地方。

super微

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈tab选项卡制作思想

这两天一直在制作tab选项卡，今天终于准确快速的制作出一个tab选项卡。在这说一下我制作的思想流程。无标题文档*{margin:0;padding:0;list-style:none;}.wrap{position:relative;width:320px;height:240px;overflow:hidden;margin:1
复制链接

扫一扫