求大神！！如何实现以下效果，点击大图片时图片会消失，点击小图片会出来大图片，点击下一张会变换，html代码如下，怎么写javascript代码，用鼠标事件编写

weiweinini3 2016-05-08 10:56:01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>网络相册</title>
<style type="text/css">
* {
font-family: Tahoma;
font-size: 12pt;
text-align: left;
margin: 0;
}

body {
margin: 10px;
}

.img {
height: 80px;
cursor: pointer;
margin: 0;
}

#gallary {
float: left;
height: 80px;
}

.bdr {
border-top: 4px dashed;
border-bottom: 4px dashed;
clear: both;
}

#show {
position: absolute;
top: 200px;
left: 250px;
background-color: #313131;
padding: 10px 10px 10px 10px;
}

#showpic {
cursor: pointer;
margin-bottom: 5px;
}

#prev, #next {
cursor: pointer;
color: #FFFAFA;
font-weight: bold;
}
</style>

<body onload="init()">
<div class="bdr">
</div>
<div id="gallary">
<img class="img" src="images/pic1.jpg"alt="pic1" />
<img class="img" src="images/pic2.jpg" alt="pic2" />
<img class="img" src="images/pic3.jpg" alt="pic3" />
<img class="img" src="images/pic4.jpg" alt="pic4" />
<img class="img" src="images/pic5.jpg" alt="pic5" />
<img class="img" src="images/pic6.jpg" alt="pic6" />
<img class="img" src="images/pic7.jpg" alt="pic7" />
<img class="img" src="images/pic8.jpg" alt="pic8" />
<img class="img" src="images/pic9.jpg" alt="pic9" />
</div>
<div class="bdr">
</div>
<div style="display: none">
<img id="showpic" src="" alt="" onclick="hide()" />
<div>
<span id="prev" >上一张</span>
<span id="next" >下一张</span></div>
</div>
</body>
</html>

...全文