今天我们来做网页换肤的一个案例,下面跟着我流程来吧。
下面是HTML布局的代码:
这里我们首先要导入几张图片到我们的文件夹中使用,然后在外层写两个“<div>”标签,一个写位置偏移,一个写样式,接着我们用无序列表来包装这些图片,我们导入这些图片的时候可以直接用“<img>”标签进行链入。
接下来是CSS样式
我们先用全局选择器“*”,先把“margin”和“padding”设为0px,接着选择到body,将宽高都设为100%宽高,接着倒入一张图片,然后在图片后面写上“no-repeat center top” 属性来进行图片的位置调整。
接着选择到我们外层的“<div>”标签的类,先给他设一个宽高,这里设的高度宽度都是不限的,自己觉得好看就行,接着用“margin”设置向中间居中,接下来这些我们就没必要讲太多,自己去调一下就好了。
到了写JS代码的时候了
我们先用var获取到我们的图片,写完之后我们用console.log()在控制台打印看看获取到了没有,养成一个习惯,接着用for循环遍历这几张图片,然后给他们设上点击事件,
最后这句话为什么外面要加单引号,因为如果不加单引号的话,里面的那句
会将以字符串的形式显示出来,这样我们就没有效果,所以要在外面家加上单引号来隔开。
完成图:
我们点击上面图片就可以切换页面图片了。
以上就是本次案例的全部,希望可以得到你们的参考,蟹蟹!