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

实现代码：
<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. 洛谷 2234 BZOJ 1588 HNOI2002 营业额统计

    [题解] treap模板题,直接用Treap维护前驱.后继,每次找到更接近当前val的加上就好了. #include<cstdio> #include<algorithm> # ...

  2. ZooKeeper是什么（转）

    ZooKeeper是什么? ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提 ...

  3. eclipse上导入import git项目

    1.左上角File->import->git eclipse 可以从很多来源处import项目,项目来源可以使git/maven/general等. import来源可以看下面 2.点击g ...

  4. Spring 新手教程（三） 注入和自己主动装配

         Spring注入是指在启动Spring容器载入bean配置的时候.对类变量的赋值. 两种经常使用注入方式:设值注入和构造注入 以下就这部分知识看代码以及代码中的注解: 1.首先看Spring ...

  5. Oracle 自己主动内存管理 SGA、PGA 具体解释

    ASMM自己主动共享内存管理: 自己主动依据工作量变化调整 最大程度地提高内存利用率 有助于消除内存不足的错误 SYS@PROD>show parameter sga NAME          ...

  6. [Python]通过websocket与jsclient通信

    站点大多使用HTTP协议通信.而HTTP是无连接的协议.仅仅有client请求时,server端才干发出对应的应答.HTTP请求的包也比較大,假设仅仅是非常小的数据通信.开销过大.于是,我们能够使用w ...

  7. Cocos2d-x 开发神器cococreator使用介绍

    Cocos2d-x 开发神器cococreator使用介绍 本篇博客小巫给大家推荐一个开发神器,你还在为搭建Cocos2d-x开发环境而头痛么.还在为平台移植问题而困扰么,我想大家都想更加高速得进行开 ...

  8. 计算cost--全表扫描

    以下教大家怎样手工算出oracle运行计划中的cost值. 成本的计算方式例如以下: Cost = (        #SRds * sreadtim +        #MRds * mreadti ...

  9. luogu2320 鬼谷子的钱袋

    题目大意 鬼谷子决定将自己的金币数好并用一个个的小钱袋装好,以便在他现有金币的支付能力下,任何数目的金币他都能用这些封闭好的小钱的组合来付账.求钱袋数最少,并且不有两个钱袋装有相同的大于1的金币数的装 ...

  10. oc35--自定义构造方法

    // // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject @property int ag ...