<!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. [Machine Learning & Algorithm] 朴素贝叶斯算法（Naive Bayes）

    生活中很多场合需要用到分类,比如新闻分类.病人分类等等. 本文介绍朴素贝叶斯分类器(Naive Bayes classifier),它是一种简单有效的常用分类算法. 一.病人分类的例子 让我从一个例子 ...

  2. 微信公众平台推出"微信保护"提升微信账号安全 附微信保护开启教程

    前两天小美女的微信公众平台要群发消息时提示需要绑定手机才能操作,当时还以为是动态ip的问题,今天微信公众平台安全中心就说升级了,原来那时已经在公测了.微信公众平台推出"微信保护", ...

  3. 微信录音接口的调用以及amr文件转码MP3文件的实现

    最近实现录音功能,主要涉及到录音的上传和下载,以及转码问题.微信,QQ默认的的音频文件是amr格式的,而播放器却不识别amr格式的音频,必须尽行转码.amr文件分为两种,一种是通用的amr格式,这种文 ...

  4. Python~recursive function递归函数

    尾递归实现循环 def fact(n): if n==1: return 1 else : return n * fact(n-1) raw_input() 字符而非数字 unsupported op ...

  5. c# 正则表达式用法

    C#正则表达式Regex类的用法 更多2014/2/18 来源:C#学习浏览量:41529 学习标签: 正则表达式 Regex 本文导读:正则表达式的本质是使用一系列特殊字符模式,来表示某一类字符串, ...

  6. Visual Studio 2013 智能提示

    Visual Studio 2013中,智能提示功能突然用不了,查了一下,使用命令行重置VS的方法解决了这个问题.步骤如下: 开始菜单 -->所有程序-->Visual Studio 20 ...

  7. [mysql]数据库基础知识

    数据库管理系统DBMS 软件 bin config db (保存数据) 写程序: 数据库在本地 找到目录 添加数据 数据库在远程 socket连接上远程机器 socket发送命令 需要做的事情 程序 ...

  8. Pyqt 控件的信号槽事件定义方法

    转载来自:http://my.oschina.net/midnite/blog/39399 Qt采用信号槽来设定UI界面上元素动作的事件绑定.自Qt4.5开始,引入了一个新的信号槽与事件绑定的方法.界 ...

  9. 51nod1228 序列求和(自然数幂和)

    与UVA766 Sum of powers类似,见http://www.cnblogs.com/IMGavin/p/5948824.html 由于结果对MOD取模,使用逆元 #include<c ...

  10. 分享Kali Linux 2016.2第50周镜像文件

    分享Kali Linux 2016.2第50周镜像文件Kali Linux官方于12月11日发布Kali Linux 2016.2的第50周镜像.这次保持以往规律,仍然是11个镜像文件.默认的Gnom ...