你的位置:首页 > Java教程

[Java教程]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>