javascript实现图片无缝滚动-------Day 27

今天感冒变严重了，鼻涕止不住啊，一卷卫生纸就这样报废了，还是不想吃药，熬熬总能熬过去吧，状态不是很好，看这么个小应用竟然看了很久的时间，到最后才像猛的明白了一样，而且查着好像有好几种做法的，今天先说说这种吧，比较好理解额。

所谓“图片无缝滚动”，我们可以这样来理解，如果只用marquee，则需要尾部也离开容器了，头部才能从头部另一端出现，重新进行滚动，如是进行循环，而无缝滚动，就是说一种首尾相连的效果，头部是咬在尾部上的，尾部全部漏出来后，后面紧挨着显示头部的部分，这样首尾相连进行的滚动就是图片无缝滚动。

理解了定义，来简单了解下实现的基本原理：

将一个序列中的所有li进行复制，添加到现有的li后面，则每次滚动到露出尾部的时候，后面紧跟着的则是复制部分的头部部分，那么我们要问了，当后面运行到尾部的时候呢，难道要再进行赋值，答案当然不是，换个思路想，当原来部分的尾部全部露出的时候，也就是现有的总部分的一半的时候，我们观察此时页面的状态是不是就跟初始状态一样了，是的，完全一样，那么我们就可以根据css的设置，将显示部分返回初始状态，这样进行周而复始，就形成了无缝滚动的效果了。

说了那么多，还是上代码来的更明白：

1、写html部分

<span style="font-size:12px;"><div id="test"><ul><li><a href="#"><img src="img/0.jpg" width="300px" height="300px"></a></li><li><a href="#"><img src="img/13.gif" width="300px" height="300px"></a></li><li><a href="#"><img src="img/13.gif" width="300px" height="300px"></a></li><li><a href="#"><img src="img/0.jpg" width="300px" height="300px"></a></li></ul></div></span>

2、设置css样式，显示初始滚动前的样子

<span style="font-size:12px;"><style type="text/css">*{margin: 0;padding: 0;}#test{position: relative;margin: 200px auto;padding: 0 30px 0 10px;width: 900px;height: 300px;background-color: cyan;overflow: hidden;}#test ul{position: absolute; list-style: none; margin: 10px 0 0 0; height: 160px;}#test ul li{float: left;list-style: none;margin: 0;height: 300px;}</style></span>

这里有两个是非常重要的：1、ul的position必须是absolute的；2、容器，也就是div，的overflow：hidden，隐藏溢出部分；

3、用javascript实现滚动

<span style="font-size:12px;"><script type="text/javascript">window.onload=function(){var a=document.getElementById("test").getElementsByTagName("ul")[0];var b=document.getElementById("test").getElementsByTagName("li");a.innerHTML += a.innerHTML;//这个地方实现复制a.style.width = (b[0].offsetWidth+10) * b.length  + "px";//复制后ul的宽度加倍var speed = -1;var timer;//这里定义一个滚动方法var scroll = function(){timer = setInterval(function () {a.style.left =a.offsetLeft+speed+ "px";if (a.offsetLeft <= -a.offsetWidth/2) {a.style.left = 0;} else if (a.offsetLeft >= 0) {a.style.left = -a.offsetWidth/2 + "px";}}, 30);};scroll();//运行滚动的方法};</script></span>

定义方法之后，一定要运行才有效，所以scroll()一定不要漏掉；另外，看到这里style.left的设置，知道ul为什么一定要用absolute了吧；定时器还是很好用啊，给力。

其实这个小应用中最大的收获有两个：1、容器，溢出隐藏；2、复制用以滚动，这两个比较新颖啊

不行了，实在困了，感冒要人命啊，睡觉去....