标签：
最近去面试了，对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件，第一想法就是跟照片轮播很相似，只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片，然后将照片全部左浮动，利用margin-left的值不断变化，来改变显示哪张照片，当达到最后一张的时候，将第一张照片appendChild到最后一张照片的后面，如果有左右移动的话，当到达第一张照片时，还要继续左移动的话，就将最后一张照片利用insertBefore，将最后一张照片放在第一张照片的前面，这两个方法都只是改变子元素的顺序而已，并没有增加子元素。
上面说的是照片滚动要怎么做，接下来开始说一下我制作js全屏滚动插件的过程。
因为之前的时候，对于scrollWidth和clientWidth和offsetWidth的区分还是不是很明确，所以认真测试了一下，这个网址也讲得很清楚：http://www.cnblogs.com/kongxianghai/p/4192032.html 后来选择使用了document.documentElement.clientWidth，刚开始使用document.body.clientWidth，的出来的结果一直有偏差，是因为Html文件的开头使用了dtd定义文件的W3C标准，所以才要使用document.documentElement.clientWidth，通过document.documentElement.clientWidth和document.documentElement.clientHeight来获取页面的宽高度之后，就可以动态的给页面设定宽高度了，这个过程中，需要先定义一个容器，叫做div1吧，div1的宽度设定为100%，高度先给一个确定的值，之后再通过js改变这个div的宽高度，使其宽高度为一个页面的宽高度，同时有一个要注意的是，div1要设定它的overflow为hidden，这样的话，就不会因为里面的元素而撑开div1的大小了。之后再在div1里面定义一个子容器，叫做div2吧，div2的宽度要容纳所有的子页面，这个宽度可以通过获取子页面的个数，将利用document.documentElement.clientWidth得到的页面宽度乘于页面数，之后得到的长度就是div2的宽度了，高度跟页面高度一样。之后再定义每个页面，页面的宽高度也是先设定一个值，之后再通过js动态赋值。现在html和css的代码就大概成功了。要注意，我们是制作插件，所以这个过程中，不能使用id来获取元素，只能通过class来获取元素。
实现后的代码就是这样：
这里要注意一个问题，body也要设置为overflow:hidden，要不然的话，到时出现页面大小变化的时候，右边和下方会出现一个滚动条大小的空白，这就是因为body没有设定overflow:hidden而导致的。
标签：
原文地址：http://www.cnblogs.com/loveya/p/4977089.html
