页面图片无缝滚动JavaScript原理：移动的区块包含图片内容，区块相对父级元素进行定位脱离文档流。再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动。由于每次间隔移动的时间设置很短，会“欺骗”人的眼睛，形成无缝滚动效果。

　　脱离文档流：父元素为相对定位position:relative，区块为绝对定位;position:absolute。

　　每隔固定时间进行left的变化：使用函数setInterval();

　　设置HTML文档以及样式：

　　滚动区域宽度=图片宽度x图片数目

　　178x4=712

　　基础的JavaScript代码：

window.οnlοad=function(){    var oDiv1=document.getElementById("div1");    var oUl=oDiv1.getElementsByTagName("ul")[0];    var aLi=oDiv1.getElementsByTagName("li");    //oUl的left值为当前获取的left值减去2px    function move()    {        oUl.style.left=oUl.offsetLeft-2+'px';        }    setInterval(move(),100);    };

　　【问题：在JavaScript中，函数是否带括号有什么区别?】

　　在向左移动后露出oDiv，图片截断，没有连续性。解决方案：oUl内的li元素在原有基础上增加1倍，并且根据新的li的宽度重新设计oUl的宽度值。在oUl的left值减少至一个oDiv1宽度值时(刚好四个图片偏移完毕)，令其left值归零，重新开始oUl的left值偏移。

　　增加后的JavaScript代码：

window.οnlοad=function(){    var oDiv1=document.getElementById("div1");    var oUl=oDiv1.getElementsByTagName("ul")[0];    var aLi=oDiv1.getElementsByTagName("li");    //li的数目翻倍    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;    //oUl的宽度重新计算    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';    /*判断若oUl已经偏移一次完毕（未增加li以前的宽度），那么令oUl的left值归零，否则left值就在当前的基础上加2px*/    function move()    {        if(-oUl.offsetLeft>=oUl.offsetWidth/2)        {            oUl.style.left=0;        }        else        {            oUl.style.left=oUl.offsetLeft-2+'px';            }    }    setInterval(move,100);                       };

　　(1)此例中的offsetLeft为负值，比较需要注意正负号。oUl.offsetLeft>=712的写法就是没有考虑其值为负，虽然没有语法上的错误，但是逻辑上if的条件判断就是失效了;

　　向左移动的无缝滚动已经完毕。倘若需要向右滚动呢?

function move()    {        if(oUl.offsetLeft>0)        {            oUl.style.left=-oUl.offsetWidth/2+'px';        }           oUl.style.left=oUl.offsetLeft+2+'px';        }    setInterval(move,100);

　

　(2)oUl的oUl.style.left=-oUl.offsetWidth/2+'px'中忘了写'px'导致代码无法正常运行，但是控制台不报错。

　　(3)明明HTML的排序布局，ul都是以左边对齐div元素的左边，为什么在向右滚动时，开始会变成以右边对齐div元素的右边?到底是什么改变了布局?

　　鼠标移入图片，滚动立即停止，鼠标移出图片，滚动继续。JavaScript代码：

function move()    {        if(-oUl.offsetLeft>oUl.offsetWidth/2)        {            oUl.style.left='0';        }        oUl.style.left=oUl.offsetLeft-2+"px";    }    var timer=setInterval(move,100);        oDiv1.onmouseover=function()    {        clearInterval(timer);                }    oDiv1.onmouseout=function()    {        timer=setInterval(move,100);        }

 

　　(4)js的变量赋值为函数时，变量定义的函数是否立即被执行，譬如：var timer=setInterval(move,100);？

　　

　　实现点击按钮，控制图片的左右滚动方向

　　添加按钮HTML代码：

　

     JavaScript代码：

window.οnlοad=function(){    var oDiv1=document.getElementById("div1");    var oUl=oDiv1.getElementsByTagName("ul")[0];    var aLi=oDiv1.getElementsByTagName("li");    var oBtn1=document.getElementById("btn1");    var oBtn2=document.getElementById("btn2");    var speed=2;    //li的数目翻倍    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;    //oUl的宽度重新计算    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';        function move()    {        if(-oUl.offsetLeft>oUl.offsetWidth/2)        {            oUl.style.left='0';        }           if(oUl.offsetLeft>0)        {            oUl.style.left=-oUl.offsetWidth/2+"px";        }        oUl.style.left=oUl.offsetLeft+speed+"px";    }    var timer=setInterval(move,100);        oBtn1.onclick=function()    {         speed=-2;        }            oBtn2.onclick=function()    {          speed=2;        }        oDiv1.onmouseover=function()    {        clearInterval(timer);                }        oDiv1.onmouseout=function()    {        timer=setInterval(move,100);        }    }

 

　(5)函数move()的重新合成构造在编写代码时不太清晰。为speed赋值时，错误的添加了var关键字 oBtn2.οnclick=function()

　　{

　　var speed=2;

　　}

　　这种写法与

　　oBtn2.οnclick=function()

　　{

　　speed=2;

　　}

　　的区别在哪里?