tab切换效果

网站中的图片自动切换

今天上一套tab切换效果的代码

动图就自己实现吧！
下面贴HTML代码，大体分两部分，图片div和按钮div，代码很容易看懂~

    
    
    
    



    

        

        
            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
            
        
        

            1
            2
            3
            4
            5
        
    

这个还是比较简单的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){
         index=0;
      }
      changeOption(index);
  }
  //获取当前button索引值
  function changeOption(curIndex){
    for(var j=0;j

代码当中博主添加了注释，但是可能还是没有表述清楚，见谅，有问题可以在下边回复或者mail博主~

（本次的js代码是博主在慕课网上学习后参考来用的，有兴趣的伙伴们可以上慕课网学习，课程名称——Tab效果切换）