<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片点击效果</title>
<style>
img {
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<input type="hidden" name="imgUrl" id="imgUrl" value="" />
<div id='wrap'>
<img src="images/a.png" alt="" num="1">
<img src="images/ab.jpg" alt="" num='2'>
<img src="images/banner2.jpg" alt="" num='3'>
<img src="images/g3.jpg" alt="" num='4'>
</div>
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript">
var wrap = document.getElementById("wrap");
var imgs = wrap.getElementsByTagName('img');
console.log(imgs.length);
for(var i in imgs) {
imgs[i].index = i;
imgs[i].onclick = function() {
if(this.getAttribute('src') == "images/2.png") {
this.setAttribute('src', document.getElementById("imgUrl").value);
} else {
document.getElementById("imgUrl").value = this.getAttribute("src");
this.setAttribute('src', 'images/2.png');
}
}
}
</script>
</body>
</html>