用DOM操纵图片：JavaScript实现点击切换图片

用DOM操纵图片：JavaScript实现点击切换图片

要求：

1. 使用JavaScript代码完成对图片的操作
2. 使用JavaScript代码完成对图片的操作
3. 自定义图片的宽度、高度、位置
4. 自行准备2张图片，在图片上绑定click事件
5. 点击图片时可以切换到另外一张图片

效果： 点击前 点击后

HTML布局

<div class="dom">
	<img src="images/C04.png" id="photo">
</div>

CSS样式

对图片的样式进行设置，添加了一个带颜色的边框

.dom{
	width: 200px;
	height: 200px;
	border: 5px solid #ff5500;
}

接下来就是最重要的JavaScript代码

//绑定事件
var Img = document.getElementById("photo");
var flag = 1;
//点击图片实现切换
Img.onclick = function(){
	if(flag){
		Img.src = "images/C02.png";
		flag = 0;
		// console.info(flag);
	}else{
		Img.src = "images/C04.png";
		flag = 1;
		// console.info(flag);
	}
}

设置一个flag值，通过点击判断当前flag的值，然后更改图片img的src属性

说明：图片切换的实质就是改变图片（img）的src属性