tab切换效果
网站中的图片自动切换
今天上一套tab切换效果的代码
动图就自己实现吧！
下面贴HTML代码，大体分两部分，图片div和按钮div，代码很容易看懂~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript" src="indexpic.js"></script>
<link rel="stylesheet" type="text/css" href="indexpic.css">
</head>
<body>
<div id="main" class="main">
<div id="pic" class="pic">
<div id="pictures" class="pictures">
<div id="p1" class="p" style="display: block;background-color: red">
<!-- <img src="img/1.jpg"> -->
</div>
<div id="p2" class="p" style="display: none;background-color: yellow">
<!-- <img src="img/2.jpg"> -->
</div>
<div id="p3" class="p" style="display: none;background-color: blue">
<!-- <img src="img/3.jpg"> -->
</div>
<div id="p4" class="p" style="display: none;background-color: green">
<!-- <img src="img/4.jpg"> -->
</div>
<div id="p5" class="p" style="display: none;background-color: pink">
<!-- <img src="img/5.jpg"> -->
</div>
</div>
<div class="btn">
<button style="background: #ed6911;">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
</div>
</div>
</body>
</html>
这个还是比较简单的div结构，下面是对应的css代码
button{
background: none;
border: 1px solid black;
}
.btn{
margin-top: -35px;
padding-left: 340px;
}
.p{
width: 100%;
height: 170px
}
#main{
width: 490px;
height: 280px;
margin: 0 auto;
}
#pictures{
height: 170px;
width: 100%;
margin-top: 110px;
}
对所有div的简单布局，最后主要实现功能~所以重要的js代码如下：
window.onload=tab;
function tab(){
//定义索引和定时器
var index=0;
var timer=null;
//获取按钮和div的个数
var bt=document.getElementsByTagName('button');
var divs=document.getElementsByClassName('p');
//设定mouseover和mouseout事件
for(var i=0;i<bt.length;i++){
bt[i].id=i;
bt[i].onmouseover=function(){
clearInterval(timer);
changeOption(this.id);
}
bt[i].onmouseout=function(){
timer=setInterval(autoPlay,2000);
}
}
//清除和设置定时器
if(timer){
clearInterval(timer);
timer=null;
}
timer=setInterval(autoPlay,2000);
//自动播放函数
function autoPlay(){
index++;
if(index>=bt.length){
index=0;
}
changeOption(index);
}
//获取当前button索引值
function changeOption(curIndex){
for(var j=0;j<bt.length;j++){
bt[j].style.background='none';
divs[j].style.display='none';
}
bt[curIndex].style.background='#ed6911';
divs[curIndex].style.display='block';
index=curIndex;
}
}
代码当中博主添加了注释，但是可能还是没有表述清楚，见谅，有问题可以在下边回复或者mail博主~
（本次的js代码是博主在慕课网上学习后参考来用的，有兴趣的伙伴们可以上慕课网学习，课程名称——Tab效果切换）
