JavaScript 网页换肤

今天我们来做网页换肤的一个案例，下面跟着我流程来吧。

下面是HTML布局的代码：

 

这里我们首先要导入几张图片到我们的文件夹中使用，然后在外层写两个“<div>”标签，一个写位置偏移，一个写样式，接着我们用无序列表来包装这些图片，我们导入这些图片的时候可以直接用“<img>”标签进行链入。

接下来是CSS样式

 

我们先用全局选择器“*”，先把“margin”和“padding”设为0px，接着选择到body，将宽高都设为100%宽高，接着倒入一张图片，然后在图片后面写上“no-repeat center top” 属性来进行图片的位置调整。

接着选择到我们外层的“<div>”标签的类，先给他设一个宽高，这里设的高度宽度都是不限的，自己觉得好看就行，接着用“margin”设置向中间居中，接下来这些我们就没必要讲太多，自己去调一下就好了。

到了写JS代码的时候了

 

我们先用var获取到我们的图片，写完之后我们用console.log（）在控制台打印看看获取到了没有，养成一个习惯，接着用for循环遍历这几张图片，然后给他们设上点击事件，

最后这句话为什么外面要加单引号，因为如果不加单引号的话，里面的那句会将以字符串的形式显示出来，这样我们就没有效果，所以要在外面家加上单引号来隔开。

完成图：

我们点击上面图片就可以切换页面图片了。

以上就是本次案例的全部，希望可以得到你们的参考，蟹蟹！