页面图片无缝滚动JavaScript原理：移动的区块包含图片内容，区块相对父级元素进行定位脱离文档流。再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动。由于每次间隔移动的时间设置很短，会“欺骗”人的眼睛，形成无缝滚动效果。
脱离文档流：父元素为相对定位position:relative，区块为绝对定位;position:absolute。
每隔固定时间进行left的变化：使用函数setInterval();
设置HTML文档以及样式：
滚动区域宽度=图片宽度x图片数目
178x4=712
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
margin:0;
padding:0;
}
#div1{
width:712px;
height:108px;
margin:100px auto;
overflow:hidden;
position:relative;
background:red;
}
#div1 ul{
position:absolute;
width:inherit;
left:0;
top:0; } #div1 ul li{
float:left;
width:178px;
height:108px;
list-style:none;
}
img{
width:inherit;
height:;
} </style>
<script>
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="./实验_files/狼.jpg"></li>
<li><img src="./实验_files/兔子.jpg"></li>
<li><img src="./实验_files/熊猫.jpg"></li>
<li><img src="./实验_files/狐狸.jpg"></li>
</ul>
</div>
</body>
</html>
基础的JavaScript代码：
window.onload=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.onload=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代码：
<input id='btn1' type='button' value='向左滚动'/>
<input id='btn2' type='button' value='向右滚动'/>
window.onload=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.onclick=function()
{
var speed=2;
}
这种写法与
oBtn2.onclick=function()
{
speed=2;
}
的区别在哪里?