JavaScript简单的tabel切换2

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table切换</title>
    <style type="text/css">
       *{
           padding: 
       }
        button{
            width: 95px;
        }
        .active {
            background-color: yellow;
        }
        #wrap{
            width:510px;
            overflow: hidden;
            margin:0 auto;
        }
        #inner{
            width:9999px;
            overflow: hidden;
            position: relative;
            left:0;
            transition: left 0.6s;
        }
        #inner a {
            float: left;
        }
        #inner img {
            display: block;
            width:510px;
        }
        #main{
            text-align: center;
        }

    </style>
</head>
<body>
  <div id="wrap">
    <div id="inner">
        <a href="###"><img src="img/1.jpg"></a>
        <a href="###"><img src="img/2.jpg"></a>
        <a href="###"><img src="img/3.jpg"></a>
        <a href="###"><img src="img/4.jpg"></a>
        <a href="###"><img src="img/5.jpg"></a>
    </div>
  </div>
  <div id="main">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
  </div>

  <script type="text/javascript">
      //获取节点
      var btnList = document.getElementsByTagName("button");
      var inner = document.getElementById("inner");
      //可见宽度
      var perWidth = inner.children[0].offsetWidth;

      //添加事件
          for(var i = 0; i < btnList.length; i++) {
        btnList[i].index = i;
        btnList[i].onclick = function() {
            inner.style.left = -perWidth * this.index + "px";
            for(var j = 0; j < btnList.length; j++) {
                btnList[j].className = "";
            }
            this.className = "active";
        }
    }
  </script>
</body>
</html>

 

posted @ 2016-01-04 17:49  riven.lcs  阅读(348)  评论(0)  编辑  收藏  举报