javascript实现图片无缝滚动-------Day 27
时间：2014-06-20 09:50:28
收藏：0
阅读：232
今天感冒变严重了，鼻涕止不住啊，一卷卫生纸就这样报废了，还是不想吃药，熬熬总能熬过去吧，状态不是很好，看这么个小应用竟然看了很久的时间，到最后才像猛的明白了一样，而且查着好像有好几种做法的，今天先说说这种吧，比较好理解额。
所谓“图片无缝滚动”，我们可以这样来理解，如果只用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、复制用以滚动，这两个比较新颖啊
不行了，实在困了，感冒要人命啊，睡觉去....
评论（0）