星空网 > 软件开发 > Java

JavaScript简单的tabel切换2

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='/images/loading.gif' data-original="img/1.jpg"></a>    <a href="###"><img src='/images/loading.gif' data-original="img/2.jpg"></a>    <a href="###"><img src='/images/loading.gif' data-original="img/3.jpg"></a>    <a href="###"><img src='/images/loading.gif' data-original="img/4.jpg"></a>    <a href="###"><img src='/images/loading.gif' data-original="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

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

越南的陆运:https://www.goluckyvip.com/tag/106100.html
中国货物陆运到越南要多少钱:https://www.goluckyvip.com/tag/106101.html
越南陆运中国路线:https://www.goluckyvip.com/tag/106102.html
中国到越南可以陆运么:https://www.goluckyvip.com/tag/106103.html
走越南陆运:https://www.goluckyvip.com/tag/106104.html
陆运走越南:https://www.goluckyvip.com/tag/106105.html
品牌出海新机遇,玩转“新兴”与“王牌”主题沙龙成功举办!:https://www.kjdsnews.com/a/1836370.html
每月资讯 | CBD为您带来最新行业动态:https://www.kjdsnews.com/a/1836371.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流