<!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. ZOJ 3703 Happy Programming Contest

    偏方记录背包里的物品.....每个背包的价值+0.01 Happy Programming Contest Time Limit: 2 Seconds      Memory Limit: 65536 ...

  2. Linux进程间通信（九）：数据报套接字 socket()、bind()、sendto()、recvfrom()、close()

    前一篇文章,Linux进程间通信——使用流套接字介绍了一些有关socket(套接字)的一些基本内容,并讲解了流套接字的使用,这篇文章将会给大家讲讲,数据报套接字的使用. 一.简单回顾——什么是数据报套 ...

  3. memcache与memcached的区别

    其实到底说成什么无所谓,只要你真正理解和知道使用就可以了!但是介于有和我一样学习时遇到的这个疑惑,在此分享下其中的缘由: Memcache是一个软件 Memcache是一个自由和开放源代码.高性能.分 ...

  4. jquery版相片墙（鼠标控制图片聚合和散开）

    照片墙,简单点说就是鼠标点击小图片时,聚合变成一张大图片:点击大图片时,散开变成小图片.这个是我一年前无意间看到的动画效果(现在已经忘记是哪位大神制作的了,引用了他的图片),刚看到这个很炫的动画超级激 ...

  5. MySQL 5.7 学习：功能性能的提升

    背景: 继上次介绍 初识 MySQL 5.6 新功能.参数完之后,刚好MySQL 5.7又GA了,在官方测试里看到,MySQL5.7在功能.性能.可用性.安全和监控上又提升了很高.现在看看和MySQL ...

  6. Eclipse下无法自动编译，或者WEB-INF/classes目录下没文件，编译失败的解决办法（转载）

    文章来源:http://www.cnblogs.com/xfiver/archive/2010/07/07/1772764.html 1.  IOException parsing XML docum ...

  7. Python网络编程之线程，进程

    一. 线程: 基本使用 线程锁 线程池 队列(生产者消费者模型) 二. 进程:  基本使用  进程锁 进程池 进程数据共享 三. 协程: gevent greenlet 四. 缓存: memcache ...

  8. c/c++与函数有关的优化

    一.函数调用的优化 调用函数需要对内存进行多次访问,因此对函数的调用通常很费时,容易造成程序效率低下: 在函数调用过程中,如果每一次函数的调用结果都相同且需要多次调用时,可以将几次调用的结果进行多次累 ...

  9. ASP.NET知识总结（2.对比Get和Post提交方式）

    2.对比Get和Post提交方式 get:<1>在地址栏中通过?key1=value1&key2=value2...的方式传值 <2>传递的数据用户可以直接在url中看 ...

  10. 【转】详解Java正则表达式语法

    (转自: http://www.jb51.net/article/76354.htm) 这篇文章主要介绍了Java正则表达式语法,包括常用正则表达式.匹配验证-验证Email是否正确以及字符串中查询字 ...