1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.img1{
margin: 40px;
}
#div1{
margin-top: 20px;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="div1">
<img src="img/picture-1.jpg"/>
</div>
<div id="div2">
<img class="img1" src="img/thumb-1.jpg"/>
<img class="img1" src="img/thumb-2.jpg"/>
<img class="img1" src="img/thumb-3.jpg"/>
</div>
<script type="text/javascript">
//获取div1的节点
div1Node = document.getElementById('div1')
//获取div2中的所有img
imgNodes = document.getElementsByClassName('img1')
for(x=0;x<imgNodes.length;x++){
if(x == 0){
imgNodes[x].onmouseover = function(){
//给页面赋值为空
div1Node.innerHTML = ''
//创建一个img节点
imgNode = document.createElement('img')
//更换图片地址
imgNode.src = "img/picture-1.jpg"
div1Node.appendChild(imgNode)
}
}
if(x == 1){
imgNodes[x].onmouseover = function(){
div1Node.innerHTML = ''
//创建一个img节点
imgNode = document.createElement('img')
//更换图片地址
imgNode.src = 'img/picture-2.jpg'
//添加到节点div1中去
div1Node.appendChild(imgNode)
}
}
if(x == 2){
imgNodes[x].onmouseover = function(){
div1Node.innerHTML = ''
//创建一个节点
imgNode = document.createElement('img')
//更换图片
imgNode.src = 'img/picture-3.jpg'
//添加到节点中去
div1Node.appendChild(imgNode)
}
}
}
</script>
</body>
</html>
结果：
image.png
