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、复制用以滚动,这两个比较新颖啊


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

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



javascript实现图片无缝滚动-------Day 27,布布扣,bubuko.com

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

上一篇:js判断浏览设备是 手机端,电脑端还是平板端


下一篇:uni-app 的更新及碰到的问题