javascript图片滚动[1]:无缝横向滚动最简单版

图片(或文字块)滚动效果,是javascript非常常见的应用,无缝滚动又是滚动效果中最基础的例子。实现无缝滚动的方法很多,现在我先讲一种最基础最常用的例子。示例网页在此

首先要有最基本的HTML结构:
<div id=”scroller”>
<div id=”begin”>
<ul>
<li><a href=”#”><img src=”http://www.jo2.org/htmls/jt.jpg” alt=”JO2.ORG示例” /></a></li>
<li><a href=”#”><img src=”http://www.jo2.org/htmls/jt.jpg” alt=”JO2.ORG示例” /></a></li>
<li><a href=”#”><img src=”http://www.jo2.org/htmls/jt.jpg” alt=”JO2.ORG示例” /></a></li>
<li><a href=”#”><img src=”http://www.jo2.org/htmls/jt.jpg” alt=”JO2.ORG示例” /></a></li>
</ul>
</div>
<div id=”end”></div>
</div>

scroller里除了本来应该有的用来装内容的begin,还有一个空的end,这是为什么呢?所以要先讲一个最简单的无缝滚动的实现原理:

javascript中有个scrollLeft属性,指元素被卷去的左边。当scrollLeft增大时,元素中的子元素就会向左移动而且被遮住;通过不停地改变外DIV的scrollLeft,内部元素就会不停地向左移,造成向左滚的感觉。

但是有一个问题,内部元素宽度有限总会有滚到头的时候,到时候就会出现一片空白。于是,现在就知道例子中空end的作用了,它的作用就是复制一份begin的内容并保持左滚,让滚动真正地“无缝”。当然,这个空DIV也可以完全用JS生成。

虽然复制了一份begin,但内部元素总宽度还是有限,还是会滚到头的。我们可以这样,当第一块(即begin)完全滚过去时,我们就把外DIV(即scroller)的scrollLeft重置为0,从头再来,这样就在视觉上实现了不间断地左滚。

javascript代码如下:

function scrollLeft(){

function $(id){

return document.getElementById(id);

}

var begin =$(“begin”);

var end = $(“end”);

var scroller = $(“scroller”);

var speed=5;//滚动速度,数字越小则越快

end.innerHTML=begin.innerHTML;//将begin的内容复制到end中

function Marquee(){

if(scroller.scrollLeft>begin.offsetWidth)//当外DIV的scrollLeft超过第1个小DIV的总宽度后(即第1个小DIV已经完全滚过去了)

scroller.scrollLeft=0;//外DIV的scrollLeft归0

else//否则

scroller.scrollLeft++;//++,被卷去的越来越多,看起来就像在向左移动一样了.

}

var go=setInterval(Marquee,speed)//之所以speed越小滚动越快的原因就是,数字越小,调用这个函数就越频繁,当然就快了.

scroller.onmouseout=function() {go=setInterval(Marquee,speed)};

scroller.onmouseover=function() {clearInterval(go)}

}

scrollLeft();

注意:JS请加在body后

当然,实际上即使以上的html及javascript代码都写了,还是不会看到效果。这个效果最关键的是CSS代码:

ul,li{margin:0px; padding:0px;list-style:none;}

.scroller {width:700px; height:254px;margin:0 auto; overflow: hidden; white-space: nowrap;/*不换行,这个很关键*/ background:#ffffff; border:1px solid #ccc; padding:4px;}

.scroller img {margin: auto 8px; border:1px #efefef solid;}

#begin, #end, #scroller ul, #scroller ul li{display:inline;}/*设置ul和li横排,这个也很重要*/

#begin{border:1px solid #f00;}/*只是为了搞清楚范围…*/

这个效果最简单,但他的功能也是最弱的,他的限制也是很死的,下面我说一下这个例子中最值得注意的地方。先说说优点:

这个例子不会限制li的个数,不论多少个它都只有一排,不用担心会换行;代码少,JS与CSS代码都很少;除此之外,没了。

再说说缺点,缺点可就多了。大家可能注意到CSS里有注释的地方,外DIV要设置不换行,而里面的两个DIV及DIV里的元素都要设置为display:inline;即同行显示,这也是此例能成功的最关键之处,但也就为此例加上了很多限制:scroller里不能用任何会造成换行的元素,比如<br/>比如p比如div比如display:block;的元素,只要有一个这种元素,那整个例子就会完全失效。另外,这个例子中会复制一个其实没有必要存在的块,对SEO不利——当然,如果全用JS复制就不存在这个问题。简单,意味着功能也简陋。

可以去看看我的示例网页

至于更多功能完善应用灵活的例子,以后我会随着我学习的进步一个一个放出。对于以上例子有什么疑问,都可以问我,我的QQ是280290728,但非诚勿扰。

6 评论

发表评论

电子邮件地址不会被公开。