Dynamic html实现页面上两张图片来回切换

错误的代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>两张图片之间来回切换</title><script type="text/javascript">var switchPicture = function () {//获取图片元素var oImage = document.getElementById("picture");//具体切换方法var flag = true;if(flag){oImage.src = "images/02.jpg";flag = false;}else{oImage.src = "images/01.jpg";flag = true;}}</script>
</head>
<body><h3>点击图片可以在两张图片之间相互切换</h3><img src="data:images/01.jpg" id="picture" onclick="switchPicture()"/>
</body>
</html>

运行上面代码结果：
图片只进行一次切换
原因在于：var flag = true;这行代码所在位置错误。

正确代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>两张图片之间来回切换</title><script type="text/javascript">var flag = true;var switchPicture = function () {//获取图片元素var oImage = document.getElementById("picture");//具体切换方法if(flag){oImage.src = "images/02.jpg";flag = false;}else{oImage.src = "images/01.jpg";flag = true;}}</script>
</head>
<body><h3>点击图片可以在两张图片之间相互切换</h3><img src="data:images/01.jpg" id="picture" onclick="switchPicture()"/>
</body>
</html>

对照下面的代码，注意二者的细节差别：
需求（触发事件）：点击div，改变div的宽度、高度和背景颜色，再点击一次恢复原状,可以无限次循环

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>DIV状态切换</title><style type="text/css">#div1{width: 80px;height: 80px;background-color: chartreuse;}</style><script type="text/javascript">var flag = false;function fn(thisObject) {if(!flag){thisObject.style.width = "40px";thisObject.style.height = "40px";thisObject.style.backgroundColor = "red";flag = true;}else {thisObject.style.width = "80px";thisObject.style.height = "80px";thisObject.style.backgroundColor = "chartreuse";flag = false;}}</script>
</head>
<body><div id="div1" onclick="fn(this)"></div>
</body>
</html>

Dynamic html实现页面上两张图片来回切换相关推荐

js实现两张图片来回切换
点击张图片A,另一张图片B显示(这时A图片隐藏), 再次点击B图片,A图片显示(这时B图片隐藏) <!DOCTYPE html> <html lang="en"& ...
图片的轮流html,两张图片轮流切换
两张图片轮流切换 var t ; $(function(){ changeImg(); $("#span01″).mouseover(function(){ showOrHide(" ...
html盒子两个背景图片,css怎么实现两张图片叠加在一起,css添加盒子背景图片
css怎么实现两张图片叠加在一起CSS怎么实现了两张图片的叠加,Css实现了两张图片叠加在一起的方法:可以通过分别设置div与页面左边缘的距离和div与页面上边缘的距离来实现.需要注意的是,两张图片都 ...
什么相片可以两张弄成一张_怎么将两张图片合成一张？
有时候我们需要将两张图片放在一起相比较,但是两张图片相互切换对比起来比较困难,有没有什么办法将两张图片合成一张?方法是肯定有的,而且还是多种多样的,本文就给大家介绍一种对普通用户来说最简单方便快捷的方 ...
python对比两张图片的不同并圈起来,比较两幅图像/图片，并标记差异
问题1: 这篇文章展示了比较两张图片的方法.最简单的方法可能是:from PIL import Image from PIL import ImageChops im1 = Image.open(&q ...
php上传多张图片为什么只显示一张,javascript,_js多张图片上传也拿到多张图片的路径在页面上展示只显示一张？只执行了一次？？？，javascript - phpStudy...
js多张图片上传也拿到多张图片的路径在页面上展示只显示一张?只执行了一次??? js多张图片上传也拿到多张图片的路径在页面上展示只显示一张?只执行了一次??? self.$els.upload ...
页面上有两个元素id相同，js中如何取值
页面上有两个table,id都是"cont2",现要在js中取到这两个table,改变样式. js实现: var tab2=document.all.cont2(1); var ...
如何将两张图片上下合成一张？
如何将两张图片上下合成一张?不知道大家有没有遇到过这样的情况,工作中需要将两张图片上传到某个网站上,但是网站只能允许上传一张图片,相信很多小伙伴都有过这样的经历吧.这个时候大家会怎么办呢?有什么方法可 ...
imageJ把两张图片在时间轴上进行合并
imageJ把两张图片在时间轴上进行合并方案1: 1.把单张图片都放在一个文件夹中: 2.把文件夹拖到imageJ中: 3.点击确定,自动完成了合并定,自动完成了合并方案2: https://b ...

Dynamic html实现页面上两张图片来回切换

Dynamic html实现页面上两张图片来回切换相关推荐

最新文章

热门文章