<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 300px;
border: 1px solid #ccc;
text-align: center;
margin: 100px auto;
}
#fj{
display: flex;
justify-content: space-between;
align-items: center;
}
#des{
padding: 10px;
color: red;
}
#big-img{
padding-bottom: 10px;
}
</style>
</head>
<body>
<div id="box">
<p id="des">蒲公英</p>
<img id="big-img" src="1.jpg" alt="" width="300px">
<ul id="fj">
<li>
<a href="1.jpg" title="蒲公英">
<img src="1.jpg" width="50px" alt="蒲公英">
</a>
</li>
<li>
<a href="2.jpg" title="花朵">
<img src="3.jpg" width="50px" alt="花朵">
</a>
</li>
<li>
<a href="3.jpg" title="树木">
<img src="2.jpg" width="50px" alt="树木">
</a>
</li>
<li>
<a href="4.jpg" title="动物">
<img src="4.jpg" width="50px" alt="动物">
</a>
</li>
<li>
<a href="5.jpg" title="大熊">
<img src="5.jpg" width="50px" alt="大熊">
</a>
</li>
</ul>
</div>
<script>
window.onload=function(){
var des=document.getElementById('des');
var img=document.getElementById('big-img');
var ul=document.getElementById('fj');
var a=ul.getElementsByTagName('a');
for(var i=0;i<a.length;i++){
a[i].onclick=function(){
console.log(this);
des.innerText=this.title;
img.src=this.href;
return false;
}
}
}
</script>
</body>
</html>
