您的位置：首页 > Web前端 > JavaScript

js实现tab切换以及自动切换

2016-11-23 14:20 417 查看

先将代码贴上:

html+css:

<style type="text/css">
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
.news{
width: 298px;
border: 1px solid #eee;
margin: 20px auto;
height: 98px;
position: relative;
overflow: hidden;
}
.tab{
height: 27px;
}
.tab-wrap{
height: 27px;
width: 301px;
position: absolute;
left: -1px;
background: #ccc;
overflow: hidden;
}
.tab-wrap li{
float: left;
text-align: center;
}
.tab-wrap li a{
display: block;
width: 58px;
height: 26px;
line-height: 26px;
border-bottom: 1px solid #eee;
padding: 0 1px;
color: #000;
}
.tab-wrap .mouseover{
background: #fff;
color: orange;
font-weight: bold;
border-bottom
eb83
: 1px solid #fff;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
padding: 0;
}
.content{
width: 100%;
height: 71px;
overflow: hidden;
}
.content .mod{
display: none;
}
.content div:first-child{
display: block;
}
.mod ul{
overflow: hidden;
}
.mod li{
float: left;
font-size: 14px;
margin: 10px;
}
</style>
</head>
<body>
<div class="news" id="news">
<div class="tab" id="tab">
<ul class="tab-wrap">
<li><a href="#">公告</a></li>
<li><a href="#">规则</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">安全</a></li>
<li><a href="#">公益</a></li>
</ul>
</div>
<div class="content" id="content">
<div class="mod">
<ul>
<li>275万购昌平邻铁三居</li>
<li>总价20万买一居</li>
<li>200万内购五环三居</li>
<li>北京首现零首付楼盘</li>
</ul>
</div>
<div class="mod">
<ul>
<li>新中式的酷色温情</li>
<li>总价20万买一居</li>
<li>200万内购五环三居</li>
<li>北京首现零首付楼盘</li>
</ul>
</div>
<div class="mod">
<ul>
<li>通州豪华3居260万</li>
<li>总价20万买一居</li>
<li>200万内购五环三居</li>
<li>北京首现零首付楼盘</li>
</ul>
</div>
<div class="mod">
<ul>
<li>经典清新简欧爱家</li>
<li>总价20万买一居</li>
<li>200万内购五环三居</li>
<li>北京首现零首付楼盘</li>
</ul>
</div>
<div class="mod">
<ul>
<li>二环稀缺2居250w甩</li>
<li>总价20万买一居</li>
<li>200万内购五环三居</li>
<li>北京首现零首付楼盘</li>
</ul>
</div>
</div>
</div>

js:

function $(id) {
return document.getElementById(id);
}
function start(){
var tabs=$("tab").getElementsByTagName('a'),
contents=$('content').getElementsByTagName('div'),
news=$('news'),
timer=null,
mark=0;
//改变状态
function change(index){
for(var j=0;j<tabs.length;j++){
tabs[j].className='';
contents[j].style.display='none';
}
tabs[index].className="mouseover";
contents[index].style.display='block';
mark=index;
}
//自动轮播函数
function play(){
mark++;
if (mark==tabs.length) {
mark=0;
}
change(mark);
}
//添加事件，轮播开始
timer=setInterval(play,2000);
news.addEventListener('mouseover',function(){
if (timer) {
clearInterval(timer);
}
timer=null;
},false);
news.addEventListener('mouseout',function(){
if (timer) {
clearInterval(timer);
}
timer=setInterval(play,2000);
},false);
for(var i=0;i<tabs.length;i++){
tabs[i].index=i;
tabs[i].addEventListener('mouseover',function(){
change(this.index);
},false);
}
}
start();

思路:主要是将tab和内容连接起来,要使tab和content对应.

1.change(index)函数目的是渲染索引为index的tab和content,先用循环将所有的tab样式清除以及让所有的content的display都为none,然后将索引为Index的tab添加上样式以及让索引为index的content的display:block.渲染完成后，再将mark的值设置为index.

function change(index){
for(var j=0;j<tabs.length;j++){
tabs[j].className='';
contents[j].style.display='none';
}
tabs[index].className="mouseover";
contents[index].style.display='block';
mark=index;
}

2.mark是用来标记当前高亮的tab和diplay为block的content,目的是当鼠标移入移出后，tab自动切换会按照当前mask的值进行切换，不会导致又从头开始切换.

mark=0;

3.play()函数是为了让tab自动切换无限循环,让mark进行自加运算,当mark的值等于tab的length时,将mark的值设置为0.

function play(){
mark++;
if (mark==tabs.length) {
mark=0;
}
change(mark);
}

4.利用for循环将tabs中的li添加上mouseover事件,tab[i].index=i是为了标记当前tab[i]的索引值,将this.index传入change(index)函数中进行渲染.

for(var i=0;i<tabs.length;i++){
tabs[i].index=i;
tabs[i].addEventListener('mouseover',function(){
change(this.index);
},false);
}

5.当鼠标划入news时，要将定时器清除，当鼠标划出时，要重新开启定时器.

news.addEventListener('mouseover',function(){
if (timer) {
clearInterval(timer);
}
timer=null;
},false);
news.addEventListener('mouseout',function(){
if (timer) {
clearInterval(timer);
}
timer=setInterval(play,2000);
},false);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航