<!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. 如何修改 Total commander 配置文件的路径

    在官方主页 http://www.ghisler.com/tools.htm#other 上提供了一个名为 INIreloc.exe  的小程序,它可以变更ini文件的保存位置.

  2. PHP函数 addslashes() 和 mysql_real_escape_string() 的区别 && SQL宽字节，绕过单引号注入攻击

    首先:不要使用 mysql_escape_string(),它已被弃用,请使用 mysql_real_escape_string() 代替它. mysql_real_escape_string() 和 ...

  3. php换行符

    1.需求 统一php换行符 2.实践 使用PHP_EOL替换换行符,保证平台的兼容性. 类似的有DIRECTORY_SEPARATOR 参考文档:http://www.cnblogs.com/code ...

  4. Java 网络编程之 Socket

    ========================UDP============================= UDP---用户数据报协议,是一个简单的面向数据报的运输层协议. UDP不提供可靠性, ...

  5. linux 用户创建、管理、权限分配

    (1)su与sudo su:通过su可以在用户之间切换,如果超级权限用户root向普通或虚拟用户切换不需要密码,什么是权力?这就是!而普通用户切换到其它任何用户都需要密码验证: sudo: sudo扮 ...

  6. Java设计模式之行为型模式

    行为型模式共11种:策略模式.模板方法模式.观察者模式.迭代子模式.责任链模式.命令模式.备忘录模式.状态模式.访问者模式.中介者模式.解释器模式. 策略模式:策略模式的决定权在用户,系统本身提供不同 ...

  7. Android编程容易犯的错误之一

    1.设置TextView的文本颜色 TextView tv; ... tv.setTextColor(R.color.white); 其实这样设置的颜色是 R.color.white的资源ID值所代表 ...

  8. nginx和rewrite的配置

    测试ok 具体参见 http://www.ccvita.com/348.html

  9. ios build时，Undefined symbols for architecture xxx问题的总结

    简单来说,Undefined symbols基本上等于JAVA的ClassNotFoundException,最常见的原因有这几种: build的时候没有加framework 比如说,有一段代码我用了 ...

  10. (转)Oracle 获取上周一到周末日期的查询sql语句

    -- Oracle 取上周一到周末的sql -- 这样取的是 在一周内第几天,是以周日为开始的 select to_char(to_date('20130906','yyyymmdd'),'d') f ...