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

实现代码：
<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. ASP.NET大闲话：ashx文件有啥用

    在VS中右击项目,添加新项,我们找到.ashx文件在新建项模板中叫做“一般处理程序”,那么这个一般处理程序用来干吗的呢? 我们可以这样地简单理解,嗯,不需搞得太复杂,它就类似.aspx文件,用于处理传 ...

  2. C#关键字详解第六节

    3.28 日志记录:前段时间参加技能大赛,所以未更新博客,特此补上,第一次写博客,希望自己认真下去,努力,天道酬勤! 比赛给我的感悟很深!古语云:山外有山,强中自有强中手! do:执行语句 说do之前 ...

  3. ganglia3.7.2,web3.7.1安装

    1.准备安装包 ganglia-3.7.2-2.el6.x86_64.rpm ganglia-gmetad-3.7.2-2.el6.x86_64.rpm ganglia-gmond-3.7.2-2.e ...

  4. ES6的let和var声明变量的区别

    关于let的描述 let允许你声明一个作用域被限制在块级中的变量.语句或者表达式.与var关键字不同的是,它声明的变量只能是全局或者整个函数块的. 作用域规则 let声明的变量只在其声明的块或子块中可 ...

  5. Python 2 声明变量 输入输出 练习

    变量: 代指,用于将具体信息对应到一个值,便于反复使用时方便调用.例如  name = ("斯诺登")   变量声明规则:以字母开头的 字母数字下划线的组合.且不能是python代 ...

  6. Linux轻松一下——cowsay命令，让动物说话

    Linux动物说话命令 使用方法 安装命令:sudo apt-get install cowsay 使用命令:cowsay hello 查看可选动物 cowsay -l 使用其他动物 cowsay - ...

  7. PHP中echo和print的区别

    这篇文章主要介绍了PHP中echo和print的区别,针对二者使用中常见的用法区别进行了较为深入的总结与分析,需要的朋友可以参考下 一般来说,PHP中动态输出HTML内容,是通过print 和 ech ...

  8. solaris11-text-安装GUI(gnome)

      http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=45057&id=3018467 1.下载所需的资源Text Ins ...

  9. Ambari-部署常见问题

    重新启动ambari-server端后调用install.start API后返回200 导致该问题的解决办法是server在启动后没有收到agent的心跳即没有与agent建立连接,在此时进行API ...

  10. eclipse中Client/Server程序生成exe

    先建两个Java Project项目,一个写Client,一个写Server端程序,程序大致为一个Server端建立监听某个port.多个Client端能够连接,实现例如以下: 1.      Ser ...