原生js轮播以及setTimeout和setInterval的理解
下面这个代码是从一个群下载下来的，为了帮助自己理解和学习现在贴出来，与初学者共勉。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生JS图片轮播</title>
<style>
* {margin: 0;padding: 0;}
#box {width: 520px;height: 280px;margin: 100px auto 0;overflow: hidden;position: relative;box-shadow: 0 0 15px black;}
ul {width: 400%;height: 100%;position: absolute;left: 0;top: 0;}
li {width: auto;display: block;float: left;}
#btnBox {width: 360px;height: 30px;margin: 50px auto 0;}
.btn {display: block;width: 80px;height: 30px;margin: 0 50px;background: peru;color: white;text-align: center;line-height: 30px;float: left;cursor: pointer;-webkit-user-select: none;}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="https://aecpm.alicdn.com/simba/img/TB1wjqpLFXXXXa0aXXXSutbFXXX.jpg" /></li>
<li><img src="https://aecpm.alicdn.com/simba/img/TB13rqpLpXXXXavXVXXSutbFXXX.jpg" /></li>
<li><img src="https://aecpm.alicdn.com/simba/img/TB1QJsLLpXXXXc2XFXXSutbFXXX.jpg" /></li>
<li><img src="https://img.alicdn.com/tps/TB1wPXTLFXXXXa8XFXXXXXXXXXX-520-280.jpg" /></li>
</ul>
</div>
<div id="btnBox">
<span class="btn" onclick="btnRight()">向左滚</span>
<span class="btn" onclick="btnLeft()">向右滚</span>
</div>
</body>
<script>
var moveAnimationTime,
moveIng = false,
box = document.getElementById("box"),
ul = box.getElementsByTagName("ul")[0],
liList = ul.getElementsByTagName("li"),
liLength = liList.length,
onceMaxLeft = boxWidth = box.clientWidth;//这里一次定义了 moveAnimationTime，moveIng，box，ul，liList，liLength，onceMaxLeft 等全局变量
function moveAnimation(callBack) {//callBack是回调函数
if (moveIng) return false;
moveIng = true;
var moveInterval,
name = callBack.name;
if (name == "moveItemRight") {
var moveS = 0;
moveInterval = setInterval(function() {
moveS -= 20;
ul.style.left = moveS + "px";
if (Math.abs(moveS) === onceMaxLeft) {
clearInterval(moveInterval);
callBack();//调用回调函数
moveIng = false;
};
}, 20);
} else {
var moveS = boxWidth * (-1),
li = liList[3];
ul.insertBefore(li, liList[0]);
ul.style.left = "-" + boxWidth + "px";
moveInterval = setInterval(function() {
moveS += 20;
ul.style.left = moveS + "px";
if (moveS >= 0) {
clearInterval(moveInterval);
callBack();
moveIng = false;
};
}, 20);
};
};
function moveItemRight() {
var li = liList[0];
ul.appendChild(li);
ul.style.left = "0px";
moveAnimationTime = setTimeout(function() {
moveAnimation(moveItemRight);
}, 3000);
};
function moveItemLeft() {
moveAnimationTime = setTimeout(function() {
moveAnimation(moveItemLeft);
}, 3000);
};
function btnLeft() {
if (moveAnimationTime) clearTimeout(moveAnimationTime);//moveAnimationTime 有值就是true 否则就是false
moveAnimation(moveItemLeft);
};
function btnRight() {
if (moveAnimationTime) clearTimeout(moveAnimationTime);
moveAnimation(moveItemRight);
};
moveAnimationTime = setTimeout(function() {
moveAnimation(moveItemRight);
}, 2000);
</script>
</html>
setTimeout和setInterval的使用
这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。
方 法
实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。
不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。
虽然表面上看来setTimeout只能应用在on-off方式的动作上，不过可以通过创建一个函数循环重复调用setTimeout，以实现重复的操作。
深入学习：http://www.cnblogs.com/qiantuwuliang/archive/2009/06/20/1507304.html
Window clearTimeout() 方法
定义和用法
clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
clearTimeout()方法的参数必须是由setTimeout()返回的ID值。
语法
Window clearInterval() 方法
定义和用法
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
语法
在javascript中如果
设置 var xx,xxb=7;
if(xxb){
alert("5")
} else{
alert("000!")
} //弹出 5
if(xx){
alert("5")
} else{
alert("000!")
}//弹出000！
说明 条件语句中只要有值就是true 否则是false。
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
Null
在 JavaScript 中 null 表示 "什么都没有"。
null是一个只有一个值的特殊类型。表示一个空对象引用。
 |
用 typeof 检测 null 返回是object。 |
|---|
你可以设置为 null 来清空对象:
Undefined
在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。
任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined.
Undefined 和 Null 的区别
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
var bba=null;
if(bba){alert("bbbaaa")}else{alert("yyyyyy")}; //弹出 yyyyyy
var ppp=undefined;
if(ppp){alert("bbbaaa")}else{alert("yyyyyy")}; //弹出 yyyyyy
Js中的window.parent ,window.top,window.self 详解
在应用有frameset或者iframe的页面时，parent是父窗口，top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe），self是当前窗口， opener是用open方法打开当前窗口的那个窗口。
window.self
功能：是对当前窗口自身的引用。它和window属性是等价的。
语法：window.self
注：window、self、window.self是等价的。
window.top
功能：返回顶层窗口，即浏览器窗口。
语法：window.top
注：如果窗口本身就是顶层窗口，top属性返回的是对自身的引用。
window.parent
功能：返回父窗口。
语法：window.parent
注：如果窗口本身是顶层窗口，parent属性返回的是对自身的引用。
在框架网页中，一般父窗口就是顶层窗口，但如果框架中还有框架，父窗口和顶层窗口就不一定相同了。
判断当前窗口是否在一个框架中：
<script type="text/javascript">
var b = window.top!=window.self;
document.write( "当前窗口是否在一个框架中："+b );
</script>
你应当将框架视为窗口中的不同区域，框架是浏览器窗口中特定的部分。一个浏览器窗口可以根据你的需要分成任意多的框架，一个单个的框架也可以分成其它多个框架，即所谓的嵌套框架。
转载：http://blog.csdn.net/zdwzzu2006/article/details/6047632
