zoukankan      html  css  js  c++  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>
    愿有岁月可回首,且以深情共白头。
  • 相关阅读:
    css设置页面内容不能被选中
    bootstrap栅格系统
    MVC框架
    类模板
    c++编译器模板机制剖析
    函数模板与函数重载
    函数模板当参数强化
    泛型编程—函数模板
    用友GRP-u8 注入-RCE漏洞复现
    漏洞代码调试(二):Strtus2-001代码分析调试
  • 原文地址:https://www.cnblogs.com/CaktyRiven/p/5099779.html
Copyright © 2011-2022 走看看