JavaScript简单的tabel切换2
<!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的更多相关文章
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发
详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...
- JavaScript实现多栏目切换效果
效果: 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" ...
- JavaScript简单入门(补充篇)
本文是对上一篇 JavaScript简单入门 的一些细节补充. 一.全局变量和局部变量 在<script>标签内定义的变量是当前页面中的全局变量.即 <script>标签可以直 ...
- 简单的Tab切换组件
由于代码都有注释,所以不多加解释,大家都知道的.直接贴代码: 代码如下: /** * 简单的Tab切换 * 支持可配置项 如下参数 */ function Tab(){ this.config = { ...
- JavaScript 实现 标签页 切换效果
JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...
- 《javascript高级程序设计》读书笔记（一）javascript简单介绍
第一章:javascript简单介绍 Netscape Navigator 开发的javascript Javascript的实现有三部分: 1.核心(ECMAScript):提供核心语言功能. ...
- 基于Spring框架的简单多数据源切换解决办法
基于Spring框架的简单多数据源切换解决办法 Spring框架JDBC包提供了一个抽象类AbstractRoutingDataSource提供了动态切换数据库的基础方法.我们仅仅需要实现一个简单的数 ...
- Javascript 简单实现鼠标拖动DIV
http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...
随机推荐
- 【转】PHP curl CURLOPT_HTTPHEADER设置HOST
为了安全,我们的web服务主机往往不能上网.维护的时候,也是通过跳板机,ssh登录后去操作. 有时候我们的程序需要访问外网.比如需要调用外网其他程序的某个接口.这下该怎么办呢? 我们可以通过PHP的C ...
- Virtual Box下配置Host-Only联网方式详解
其实网络这类相关的文章很多,我只是想结合自己的实际情况,把我的经验写下来,给那些需要的人们吧. 主机:windows 7 虚拟机:CentOS6.0 VirtualBox:4.2.0 虚拟机在安装好之 ...
- FBI阅人术——用最短的时间了解一个人
FBI阅人术--用最短的时间了解一个人 和陌生人第一次见面时,要如何在一开始谈话的几分钟内,了解这个人?如何和对方拉近距离?如何找到对方喜爱的话题?如何让对方愿意开口? 这都得依靠细心而入微的观察力, ...
- Java volatile的用法---转载
我们知道,在Java中设置变量值的操作,除了long和double类型的变量外都是原子操作,也就是说,对于变量值的简单读写操作没有必要进行同步. 这在JVM 1.2之前,Java的内存模型实现总是从主 ...
- MSSQL-to-MySQL v5.3, 从MSSQL迁移到mySQL的最佳工具
将现有的MSSQL数据库迁移到MySQL数据库,尝试了很多种工具 MySQL Workbench / MSSQL to MySQL Export / DB Converter / openDBcopy ...
- 【Network】golang 容器项目 flannel/UDP相关资料
参考资料: flannel_百度搜索 Flannel首页.文档和下载 - 容器集群子网 - 开源中国社区 docker下基于flannel的overlay网络分析 - OPEN 开发经验库 flann ...
- springMVC学习之url重写：urlrewrite with tuckey UrlRewriteFilter
在开发网站时地址栏的一些信息是我们不希望让客户看到,所以在开发时候就会涉及到url重写的问题. 下面介绍一种常用的url地址重写的方法. 1.利用maven下载相关jar文件,pom文件配置如下: & ...
- maven install 构建报错(2)
错误:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin: 2.3 . 2 :compile ( default ...
- Java控件（日常笔记）
Java的一些控件 text:文本区域 readonly属性:是否只读.password:密码区域,输入的文本以'*'展示checkbox:复选框 checked属性:是否选中:radio:单选框: ...
- CentOS7—HAProxy安装与配置
概述 Haproxy下载地址:http://pkgs.fedoraproject.org/repo/pkgs/haproxy/ 关闭SElinux.配置防火墙 1.vi /etc/selinux/co ...