1.往复运动动画
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>motion</title>
<script type="text/javascript">
window.onload = function(){
var iLeft = 0;
var iSpeed = 3;
var oDiv = document.getElementById('Div1');
/*clearInterval() 关闭*/
var timer = setInterval(function(){
iLeft += iSpeed;
oDiv.style.left = iLeft + 'px';
if(iLeft>700){ /*右侧判断*/
iSpeed = -3;
}
if(iLeft<0){ /*左侧判断*/
iSpeed = 3;
}
},20) /*setInterval(函数，完成时间)*/
}
</script>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background-color: yellow;
margin: 100px 0;
position: absolute;
}
body{
margin: 0;
}
</style>
</head>
<body>
<div class="div1" id="Div1"></div>
</body>
</html>
2.无缝滚动
例子：小南子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>小南子</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('slide'); /*获取块元素*/
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
var oUl = oDiv.getElementsByTagName('ul')[0]; /*获取的是元素集，取第一个*/
var iRan = 0; /*位移初始值*/
var iSpeed = -2;
var iNowspeed = 0; /*临时存储*/
oUl.innerHTML = oUl.innerHTML+oUl.innerHTML; /*oUl.innerHTML是全部li，两个相加，相当于图片拼接*/
function moving(){ /*移动函数*/
iRan += iSpeed; /*位移量*/
if(iRan<-2060){ /*五个li移出*/
iRan = 0; /*回到初值，速度快，肉眼看不出*/
}
if(iRan>0){ /*当第一张图片往右，立即拉到第二段图片的第一张*/
iRan = -2060;
}
oUl.style.left = iRan + 'px'; /*position的left*/
}
var timer = setInterval(moving,20); /*定时器*/
oBtn01.onclick = function(){ /*点击控制方向*/
iSpeed = -2;
}
oBtn02.onclick = function(){
iSpeed = 2;
}
oDiv.onmouseover = function(){ /*鼠标移进*/
iNowspeed = iSpeed;
iSpeed = 0; /*停止*/
}
oDiv.onmouseout = function(){ /*鼠标移出*/
iSpeed = iNowspeed; /*恢复上次移动*/
}
}
</script>
<style type="text/css">
*{ /*把li的padding和margin消除*/
margin: 0;
padding: 0;
}
.list_con{
width: 1236px; /*3张图片可视*/
height: 526px; /*图片高度*/
overflow: hidden; /*隐藏溢出*/
border: 1px solid #000; /*边框*/
margin: 10px auto 0; /*相对body*/
position: relative; /*父级position，relative*/
background-color: #F0F0F0; /*背景色*/
}
.list_con ul{
width: 3296px; /*8张图片宽度，太小会导致拼接出错*/
height: 506px;
list-style: none; /*除去li样式*/
position: absolute; /*相对list_con*/
left: 0; /*初始位置*/
top: 0;
}
.list_con ul li{
float: left; /*向左靠齐*/
width: 392px; /*一张图片宽度*/
height: 506px;
margin: 10px; /*图片间的距离*/
/*position: absolute;*/
}
.btn_con{
width: 1456px; /*两个按钮的所在的范围*/
height: 50px;
margin: 230px auto 0; /*按钮位置*/
position: absolute;
float: left;
}
.btn_con .left,.right{
width: 50px; /*按钮大小*/
height: 50px;
background-color: gold; /*背景色*/
position: absolute;
/*left: 0px;
top: 0px;*/
font-size: 50px; /*<>的大小*/
border-radius: 25px; /*圆角*/
line-height: 50px; /*垂直居中*/
font-family: 'Arial'; /*字体*/
text-align: center; /*水平居中*/
cursor: pointer; /*鼠标光标，移到按钮会变成小手，像接触链接一样*/
opacity: 0.5; /*透明度*/
}
.right{
left: 1305px; /*按钮位置*/
}
.left{
left: 10px;
}
</style>
</head>
<body>
<div class="btn_con" id="btn">
<div class="left" id="btn01"><</div>
<div class="right" id="btn02">></div>
</div>
<div class="list_con" id="slide">
<ul>
<li><a href="#"><img src="images/小林子1.jpg" alt="nanzi"></a></li>
<li><a href="#"><img src="images/小林子2.png" alt="nanzi"></a></li>
<li><a href="#"><img src="images/小林子3.png" alt="nanzi"></a></li>
<li><a href="#"><img src="images/小林子4.png" alt="nanzi"></a></li>
<li><a href="#"><img src="images/小林子5.png" alt="nanzi"></a></li>
</ul>
</div>
</body>
</html>
3.变量作用域
变量作用域指的是变量的作用范围，JavaScript中的变量分为全局变量和局部变量。
（1）全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
（2）局部变量：在函数内部定义的变量，只能在定义改变量的函数内部访问，外部无法访问