电脑现已成为我们工作、生活和娱乐必不可少的工具了，在使用电脑的过程中，可能会遇到商品浏览用JavaScript怎么写的问题，如果我们遇到了商品浏览用JavaScript怎么写的情况，该怎么处理怎么才能解决商品浏览用JavaScript怎么写带来的困扰呢，对于这样的问题其实我们只需要电脑，Hbuilder,首先，打开电脑上的Hbuilder软件，创建一个项目，然后创建一个文件夹，用来存放图片与代码。把需要用到的图片复制粘贴进img文件夹下，备用。如下图所示：在html页面里编写代码，首先，先把静态样式写好，用div套img。先把图片固定好编写静态页面的css样式，进行排版的调整最后一步，编写JavaScript的代码好啦，这样就轻松的编写好了整套的代码，马上运行试试吧附代码：这样就解决了这样的问题，接下来给大家带来商品浏览用JavaScript怎么写的详细操作步骤。

工具/原料

电脑，
Hbuilder,

方法/步骤

首先，打开电脑上的Hbuilder软件，创建一个项目，然后创建一个文件夹，用来存放图片与代码。

把需要用到的图片复制粘贴进img文件夹下，备用。如下图所示：

在html页面里编写代码，首先，先把静态样式写好，用div套img。先把图片固定好

编写静态页面的css样式，进行排版的调整

最后一步，编写JavaScript的代码

好啦，这样就轻松的编写好了整套的代码，马上运行试试吧

附代码：

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;

}

注意事项

注意细微的地方，例如标点符号的使用

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。