<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
position: relative;
margin: 0;
padding: 0;
}
#top{
width: 600px;
height: 200px;
/*background-color: blue;*/
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
#top #left{
float: left;
width: 250px;
height: 200px;
background-color: red;
}
#top #left img{
width: 250px;
height: 200px;
}
#top #right{
float: right;
width: 250px;
height: 200px;
background-color: gold;
}
#top #right img{
width: 250px;
height: 200px;
}
#bottom{
width: 600px;
height: 600px;
background-color: green;
margin-left: auto;
margin-right: auto;
}
#bottom img{
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<div id="top">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="bottom"></div>
</body>
</html>
<script type="text/javascript">
var imgArray = ["img/01.jpg","img/03.jpg"]
var leftNode = document.getElementById('left')
var rightNode = document.getElementById('right')
var imgNode = document.createElement('img')
imgNode.src = imgArray[0]
var imgNode1 = document.createElement('img')
imgNode1.src = imgArray[1]
leftNode.appendChild(imgNode)
rightNode.appendChild(imgNode1)
var bottomNode = document.getElementById('bottom')
leftNode.onclick = function(){
var imgNode = document.createElement('img')
imgNode.src = imgArray[0]
bottomNode.innerHTML = null
bottomNode.appendChild(imgNode)
}
rightNode.onclick = function(){
var imgNode = document.createElement('img')
imgNode.src = imgArray[1]
bottomNode.innerHTML = null
bottomNode.appendChild(imgNode)
}
</script>
网友评论