商品浏览用JavaScript怎么写
1、首先，打开电脑上的Hbuilder软件，创建一个项目，然后创建一个文件夹，用来存放图片与代码。
2、把需要用到的图片复制粘贴进img文件夹下，备用。如下图所示：
3、在html页面里编写代码，首先，先把静态样式写好，用div套img。先把图片固定好
4、编写静态页面的css样式，进行排版的调整
5、最后一步，编写JavaScript的代码
6、好啦，这样就轻松的编写好了整套的代码，马上运行试试吧
7、附代码：
html页：
<div class="show">
<div class="show_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;
}