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>
巴特西

JavaScript简单的tabel切换2

最新文章

热门文章
