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

实现代码：
<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. 06007_redis数据存储类型——hash

    1.概述 (1)Redis中的Hash类型可以看成具有String Key和String Value的map容器.所以该类型非常适合于存储值对象的信息,如Username.Password和Age等: ...

  2. GlobalSign 增强型(EV) SSL 证书

    GlobalSign 增强型(EV) SSL 证书,属于最高验证级别的EV SSL,验证域名所有权,进行严格的企业真实身份验证,证书标识企业组织机构名称,强化信任度,浏览器地址栏变绿色.提供40位/5 ...

  3. 津津的储蓄计划 2004年NOIP全国联赛提高组

    题目描述 Description 津津的零花钱一直都是自己管理.每个月的月初妈妈给津津300元钱,津津会预算这个月的花销,并且总能做到实际花销和预算的相同. 为了让津津学习如何储蓄,妈妈提出,津津可以 ...

  4. 巧克力棒&&新年的巧克力棒

    巧克力棒 题目描述 LYK 找到了一根巧克力棒,但是这根巧克力棒太长了,LYK 无法一口吞进去.具体地,这根巧克力棒长为 n,它想将这根巧克力棒折成 n 段长为 1 的巧克力棒,然后慢慢享用.它打算每 ...

  5. H - Seek the Name, Seek the Fame

    The little cat is so famous, that many couples tramp over hill and dale to Byteland, and asked the l ...

  6. The superclass &quot;javax.servlet.http.HttpServlet&quot; was not found on the Java Build Path

    完整错误信息: THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS"AS IS" AND ANY ...

  7. Android 外部存储权限分析

    不知道你有么有发现.来自菜鸟的成长史:http://blog.csdn.net/zjbpku/article/details/25161131. KitKat之后的版本号不再支持用户对外置SDcard ...

  8. 体验决定销量，真假4K争论仅仅是忽悠人而已

        随着4K电视越来越多.网上关于真假4K电视的争论也越来越激烈,RGB与RGBW的死掐也进入了白热化阶段.从某种意义上讲.真假4K话题是4K电视市场竞争加剧的必定结果.并且这场争论已经严重影响了 ...

  9. 邪恶的C++

    曾经看到一篇很有趣的文章,今天转载一下.抱歉的是没有找到最原始的版本,算是遗憾吧. ---------- 华丽的分割线 ---------- Linus曾经(2007年9月)在新闻组gmane.com ...

  10. 在ubuntu中安装photoshop cs6

    对于很多专业的PS高手来说,真心难以找到顺手的且可以完美替代PS的软件,所以我们这里的解决办法就是用wine来安装. 虽然网上有很多的wine安装ps的方法,但是在使用过程往住会发生莫名其妙的崩溃,体 ...