注:这篇文章写一个无复制版的图片滚动效果,而有复制版的见这里.
图片无缝滚动是一个很初级的javascript效果，要实现它得首先写好HTML。它的基本HTML结构如下:
<div id=“scroller” class=“scroller”>
<ul class=“c”>
<li><a href=“#”><img src=“http://www.jo2.org/htmls/jt.jpg” alt=“JO2.ORG示例” />图片1</a></li>
<li><a href=“#”><img src=“http://www.jo2.org/htmls/jt.jpg” alt=“JO2.ORG示例” />图片2</a></li>
<li><a href=“#”><img src=“http://www.jo2.org/htmls/jt.jpg” alt=“JO2.ORG示例” />图片3</a></li>
<li><a href=“#”><img src=“http://www.jo2.org/htmls/jt.jpg” alt=“JO2.ORG示例” />图片4</a></li>
<li><a href=“#”><img src=“http://www.jo2.org/htmls/jt.jpg” alt=“JO2.ORG示例” />图片5啊5</a></li>
</ul>
</div>
HTML讲解:外层一个主容器,内层一个图片容器.例子中是UL与LI,这个也可以自定义,但一定要有双层容器.因为运动的时候外层当然是不动的,动的是内层的图片容器.
然后用CSS代码对HTML进行修饰.主要作用是让图片排成一排,其余美化效果自定义即可.
*{margin:0;padding:0;}
ul,li{list-style:none;}
.scroller {width:700px; height:300px;margin:0 auto; overflow: hidden;border:1px solid #888; position:relative;}
.scroller ul{clear:both;width:8888px;position:absolute;}
.scroller li{float:left;width:210px;overflow:hidden; text-align:center;padding:6px 0;}
.scroller li:hover{ background:#ffa;}
.scroller li a{color:#32a; text-decoration:none; margin:auto;}
.scroller li a:hover{color:#f00;}
.scroller li a img {display:block;margin:0 auto 4px; border:1px #efefef solid;}
CSS讲解:首先设置外层包围的DIV为position:relative;再设置其中的图片容器UL为position:absolute;这样当改变UL的left值时才能看到变化;图片容器UL的宽度可以设置成无限大,只是为了让LI全排成一排,放心,不会撑开页面;
接下来要做的是让图片们滚动起来.无复制的意思是不用复制一个图片容器就能实现无缝滚动,所以思路是在图片滚动到第1张图片完全滚动过去后就将第1张图片移动到图片列表最后,这样依次滚动一张移动一张,造成永远滚不远的错觉.
javascript代码:
//scroll left
var getid = function(id){
return (typeof id == “object”)?id:document.getElementById(id);
}
var gettag = function (id,tag){
return getid(id).getElementsByTagName(tag);
}
var scr=getid(‘scroller’);
var ul1=gettag(‘scroller’,‘UL’)[0];//得到图片列表的UL
var l=(ul1.style.left) ? (ul1.style.left) : 0;
var start;
var lis=gettag(‘scroller’,‘LI’);
var j=0;
var k=206;//此值是一个LI的宽度,自定义
var speed = 35;//滚动速度,越小越快
var step = 3;
function scrollLeft(){
if(l< -k){
var tmp = ul1.removeChild(lis[0]);//删除UL中的第一个LI,并将其内容附给tmp
ul1.appendChild(tmp);//将tmp(即第一个LI)添加到UL最后
//上面两句可缩写为: ul1.appendChild(ul1.removeChild(lis[0]));
lis=gettag(‘scroller’,‘LI’);//重新得到一次数组以便重新排列索引
l=0;//将UL的left重置为0
}else{
l-=step;
}
ul1.style.left =l +‘px’;
}
start=setInterval(scrollLeft,speed);//启动滚动程序
scr.onmouseover = function (){clearInterval(start);}
scr.onmouseout= function (){start=setInterval(scrollLeft,speed);}
javascript讲解:代码中k变量为一个LI的可视宽度,不好找,但一定要准确,不然滚动时会出现卡顿现象;将第1个LI移动到最后一个用了removeChild和appendChild,removeChild用来移除某子元素,而且它会返回这个被移除的元素,所以如果定义var tmp = ul1.removeChild(lis[0]);就能同时移除元素并将它赋给一个变量;函数中有一句lis=gettag(‘scroller’,'LI’),这是用来重排数组的索引的,因为用了removeChild移除元素后索引值不会自动变化,从而导致无法继续执行,解决办法就是重新得到一次数组.
无复制版优势总结:代码干净,无冗余;列表元素中可以有换行元素(什么意思?);UL宽度可以不必理会,更自由;无多余HTML元素,对SEO好;关键是我觉得思路很酷(自恋ing…)