JavaScript简单的tabel切换2-优快云博客

本文介绍了一种使用HTML、CSS及JavaScript实现图片轮播的方法。通过设置按钮点击事件来控制图片的显示与隐藏，利用CSS样式进行布局与过渡效果的设定。此方案能够帮助开发者快速搭建美观实用的图片轮播组件。

<!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>