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复制就不存在这个问题。简单，意味着功能也简陋。

可以去看看我的示例网页。