JavaScript如何实现换肤效果

1、打开电脑上的Hbuilder软件，创建一个web项目，打开.html页面，如图所示：

2、首先，我们先来编写基本布局，其实非常简单，通过div来布局，吧所需要的图片的放在div中

3、然后，我们来编写css，在这里本人用的是内部样式表，直接在里面加入<style></style>标签，如下图所示：

4、最后，我们来编写最重要的JavaS罕铞泱殳cript部分，首先通过<script></script>标签来引入JavaScript，接着获取元素，转变图片.如下图：

5、这样就写好了所有的代码，运行一下看看吧，

6、下面附带代码，可以试试：罕铞泱殳css部分：<style type="text/css"稆糨孝汶;> *{ margin: 0px; padding:0px; } img{ width:200px; height:100px; float:left; } body{ background-image:url(img/1.jpg); } .header{ width: 1000px; height: 100px; margin: 0 auto; } </style>页面布局部分： <div class="header"> <img src="img/1.jpg"/> <img src="img/2.jpg"/> <img src="img/3.jpg"/> <img src="img/4.jpg"/> <img src="img/5.jpg"/> </div>JavaScript部分：<script type="text/javascript"> window.onload=function(){ var imgs=document.getElementsByTagName("img"); imgs[0].onclick=function(){ document.body.style.backgroundImage="url(img/1.jpg)"; } imgs[1].onclick=function(){ document.body.style.backgroundImage="url(img/2.jpg)"; } imgs[2].onclick=function(){ document.body.style.backgroundImage="url(img/3.jpg)"; } imgs[3].onclick=function(){ document.body.style.backgroundImage="url(img/4.jpg)"; } imgs[4].onclick=function(){ document.body.style.backgroundImage="url(img/5.jpg)"; } } </script>