JS左右无缝滚动(一般方法+面向对象方法)_javascript技巧
来源:汇意旅游网
代码如下:
JS左右无缝滚动(一般方法+面向对象方法)
window.onload=function(){ //一般方法
var wrap=document.getElementById("wrap");
var wrap_ul=wrap.getElementsByTagName("ul")[0];
var wrap_li=wrap.getElementsByTagName("li");
wrap_ul.innerHTML+=wrap_ul.innerHTML;
wrap_ul.style.width=(wrap_li[0].offsetWidth+20)*wrap_li.length+"px";
Autoscroll=setInterval(scroll,100);
function scroll(){
wrap_ul.style.left=wrap_ul.offsetLeft-3+"px"; //这里因为ie对offsetLeft的解析不一样,所以ie下必须减大于等于3的数
if(wrap_ul.offsetLeft<=-wrap_ul.offsetWidth/2){
wrap_ul.style.left="0px";
}else if(wrap_ul.offsetLeft>=0){
wrap_ul.style.left=-wrap_ul.offsetWidth/2+"px";
}
}
wrap.onmouseover=function(){
clearInterval(Autoscroll);
}
wrap.onmouseout=function(){
Autoscroll=setInterval(scroll,100);
}
}