tab切换效果篮球世界杯在哪买球

Js 实现tab切换效果,js实现tab切换

今天商城系统的后台要添加一个Tab切换的效果,一开始没有思路想要自己去实践这个效果

从网上找jquery 已经有了很好看的案例,实现之后我来学习下思路是如何完成的

 

http://www.bkjia.com/Javascript/1122376.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1122376.htmlTechArticleJs 实现tab切换效果,js实现tab切换 今天商城系统的后台要添加一个Tab切换的效果,一开始没有思路想要自己去实践这个效果 从网上找jquer...

网站中的图片自动切换

篮球世界杯在哪买球,今天上一套tab切换效果的代码
篮球世界杯在哪买球 1
篮球世界杯在哪买球 2
篮球世界杯在哪买球 3
篮球世界杯在哪买球 4
篮球世界杯在哪买球 5

动图就自己实现吧!
下面贴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效果切换)

本文由美洲杯在哪买球发布于计算机教程,转载请注明出处:tab切换效果篮球世界杯在哪买球

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。