1、首先，打开电脑上的Hbuilder软件，创建一个项目，然后创建一个文件夹，用来存放图片与代码。
2、把需要用到的图片复制粘贴进img文件夹下，备用。如下图所示：
3、在html页面里编写代码，首先，先把静态样式写好，用div套img。先把图片固定好
4、编写静态页面的css样式，进行排版的调整
5、最后一步，编写JavaScript的代码
6、好啦，这样就轻松的编写好了整套的代码，马上运行试试吧
7、附代码：html页：<div cla衡痕贤伎ss="show"> <div class="s茑霁酌绡how_up"> </div> <div class="show_down"> <img src="./img/01.jpg"/> <img src="./img/02.jpg"/> <img src="./img/03.jpg"/> <img src="./img/04.jpg"/> <img src="./img/05.jpg"/> </div> </div> <script type="text/javascript"> window.onload=function(){ var img=document.getElementsByTagName("img"); var show_up=document.getElementsByClassName("show_up")[0]; img[0].onmouseover=function(){ show_up.style.backgroundImage="url(img/01big.jpg)" } img[1].onmouseover=function(){ show_up.style.backgroundImage="url(img/02big.jpg)" } img[2].onmouseover=function(){ show_up.style.backgroundImage="url(img/03big.jpg)" } img[3].onmouseover=function(){ show_up.style.backgroundImage="url(img/04big.jpg)" } img[4].onmouseover=function(){ show_up.style.backgroundImage="url(img/05big.jpg)" } } </script>css页：@charset "utf-8";*{ margin: 0px; padding: 0px;}.show{ width:360px ; height:430px ; border:1px solid black ; margin: 0px auto;}.show_up{ width:360px ; height:360px ; background-image: url(../img/01big.jpg);}.show_down{ width:360px; height: 70px;}.show_down img{ float: left;}