<!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的更多相关文章

  1. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  2. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  3. JavaScript实现多栏目切换效果

    效果: 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" ...

  4. JavaScript简单入门(补充篇)

    本文是对上一篇 JavaScript简单入门 的一些细节补充. 一.全局变量和局部变量 在<script>标签内定义的变量是当前页面中的全局变量.即 <script>标签可以直 ...

  5. 简单的Tab切换组件

    由于代码都有注释,所以不多加解释,大家都知道的.直接贴代码: 代码如下: /** * 简单的Tab切换 * 支持可配置项 如下参数 */ function Tab(){ this.config = { ...

  6. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

  7. 《javascript高级程序设计》读书笔记（一）javascript简单介绍

    第一章:javascript简单介绍 Netscape Navigator 开发的javascript   Javascript的实现有三部分: 1.核心(ECMAScript):提供核心语言功能. ...

  8. 基于Spring框架的简单多数据源切换解决办法

    基于Spring框架的简单多数据源切换解决办法 Spring框架JDBC包提供了一个抽象类AbstractRoutingDataSource提供了动态切换数据库的基础方法.我们仅仅需要实现一个简单的数 ...

  9. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

随机推荐

  1. ML 基础知识

    A computer program is said to learn from experience E with respect to some task T and some performan ...

  2. 【重装系统】线上Linux服务器（2TB）分区参考方案

    如果是线上服务器,假设它是 2TB 的 SATA 硬盘.8GB 内存,建议按如下方式进行分区: / 20480M(20G)(主分区) /boot 128M swap 10240M /data 2016 ...

  3. 小知识点总结HTML、CSS、JavaScript（一）

    1.给元素同时设置背景色和背景图的时候,当背景色写在背景图后面,背景色会覆盖背景图未覆盖的位置 如background:url(); background-color:red; 2.当需求一段文字右对 ...

  4. HTTP API开发

    近期手上的安卓app需要用到自动更新的功能,想着怎么实现,看了下很多应用商店的sdk,觉得不太好,可能会收集用户隐私,于是想着自己实现一个http api后面自己可以实现自动更新,甚至广告推送的功能, ...

  5. Android Killer工具用法

    一.工程信息 工程信息主要是解析的AndroidManifest文件 二.工程管理器 三.配置插入代码 在代码中点右键就可以一键插入代码了 四.字符串搜索功能 支持正则, 比jeb搜索功能强大 来自为 ...

  6. Nginx上传文件返回413的解决

    通过http上传文件时返回403 Request Entity Too Large错误时,原因是默认设置的允许上传文件太小,默认是2M,如果上传文件大小大于2M时,那么就会返回413的错误,修改ngi ...

  7. centos6.3安装python2.7, pip2.7, mysql

    参考: https://github.com/h2oai/h2o-2/wiki/Installing-python-2.7-on-centos-6.3.-Follow-this-sequence-ex ...

  8. linux 使用 nvidia 的 gpu

    第一种方法: [Wizard@Wizard ~]$ nvidia-detect kmod-nvidiaOptimus hardware detected: An Intel display contr ...

  9. js中选定元素slice()

    选定元素slice() slice() 方法可从已有的数组中返回选定的元素. 语法 arrayObject.slice(start,end) 参数说明: 1.返回一个新的数组,包含从 start 到 ...

  10. mysql explain用法

    explain显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句. 使用方法,在select语句前加上explain就可以了,如: explai ...