通过点击按钮，实现图片的隐藏与显现，切换。

实现代码：
<style>

			.a{

				width: 300px;

				height: 300px;

				border: 1px solid black;

			}

			.b{

				width: 50px;

				height: 30px;

				float: left;

				cursor: pointer;

			}

			.c{

				width: 200px;

				height: 200px;

				position: relative;

				margin-top: 30px;

				margin-left: 0px;

			}

			.c1{

				width: 200px;

				height: 200px;

				position: absolute;

				left: 10px;

				bottom: 0px;

			}

		</style>

	</head>

	<body>

		<div class="a">

			<div class="b" onclick="show('a1')">11</div>

			<div class="b" onclick="show('a2')">22</div>

			<div class="b" onclick="show('a3')">33</div>

			<div class="c">

				<div id="a1" class="c1" style="background-color: #000000;"></div>

				<div id="a2" class="c1" style="background-color: red; " ></div>

				<div id="a3" class="c1" style="background-color: yellow; "></div>

			</div>	

		</div>

	</body>

</html>

<script>

	function show(de)

	{

		var d= document.getElementById(de);	

		var c= document.getElementsByClassName("c1");

		for(var i=0;i<c.length;i++)

		{

			c[i].style.display="none";

		}

		d.style.display="block";

	}

</script>

　　

如何用js代码实现图片切换效果的更多相关文章

  1. Lightbox JS v2.0图片切换效果

    代码下载

  2. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  3. js原生带缩略图的图片切换效果

    js原生带缩略图的图片切换效果 本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...

  4. javascript马赛克遮罩图片切换效果:XMosaic.js(转)

    新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...

  5. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

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

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

  7. 100种不同图片切换效果插件pageSwitch

    分享100种不同图片切换效果插件pageSwitch.这是一款适用于全屏切换场景,即一切一屏,并且实现了超过一百种切换效果,支持自定义切页动画.效果图如下: 在线预览   源码下载 实现的代码. ht ...

  8. 精致3D图片切换效果，最适合企业产品展示

    这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...

  9. Flash 用FLASH遮罩效果做图片切换效果

    本教程是关于FLASH应用遮罩效果制作好看的图片切换效果.该教程选用FLASH遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果 ...

随机推荐

  1. 爬虫系列(三) urllib的基本使用

    一.urllib 简介 urllib 是 Python3 中自带的 HTTP 请求库,无需复杂的安装过程即可正常使用,十分适合爬虫入门 urllib 中包含四个模块,分别是 request:请求处理模 ...

  2. mysql无密码重启

    mysql无密码重启 /etc/init.d/mysql stopnohup /usr/bin/mysqld_safe --user=mysql --skip-grant-tables &

  3. 多个机器获取微信access-token导致的有效性问题

    多个机器获取微信access-token导致的有效性问题 单个机器获取的access-token,只有最后一个是有效的: 多个机器各自获取自己的access-token,都是各自有效的: 在服务器和本 ...

  4. OC第六课

    主要内容:Block(Block语法.Block使用.Block实现数组排序) 一.Block语法 Block:块语法.本质上是匿名函数(没有函数名称的函数),和函数指针非常相似 函数回想: 实现了某 ...

  5. Struts2—Action

    二.命名空间namespace ·命名空间namespace须要放在相应的package下 ·Namespace必须以"/开头". ·Result的name是"succe ...

  6. ActionBar第一课简单介绍

    .ActionBar简单介绍 ActionBar是显示在界面顶部的标题栏. 官方推荐开发者尽量使用 ActionBar代替OptionsMenu和TabHost. 典型应用方式有: 使用导航栏中的应用 ...

  7. win7_32虚拟机网络设置

    今天工作中同事需要使用ie8的浏览器,组内同事没有,想到自己玩的win7_32虚拟机上有ie8,想让对方连接使用,发现自己本机可以远程连接,同事不能连接 排查原因:可能虚拟机使用的是nat模式连接的网 ...

  8. Spring学习笔记——Spring事务仅仅对执行时异常回滚

    我们在使用Spring时候一般都知道事务在遇到异常的时候会回滚.岂不知Spring的事务默认仅仅有在发生执行时异常即:RunTimeException时才会发生事务,假设一个方法抛出Exception ...

  9. Spring源代码解析和配置文件载入

    Spring类的继承结构图: Spring运用了大量的模板方法模式和策略模式,所以各位看源代码的时候,务必留意,每个继承的层次都有不同的作用.然后将同样的地方抽取出来,依赖抽象将不同的处理依照不同的策 ...

  10. luogu2746 校园网

    题目大意: 一些学校连入一个电脑网络.那些学校已订立了协议:每个学校都会给其它的一些学校分发软件(称作“接受学校”).注意即使 B 在 A 学校的分发列表中, A 也不一定在 B 学校的列表中. 你要 ...