下面这个代码是从一个群下载下来的，为了帮助自己理解和学习现在贴出来，与初学者共勉。

<!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值。

语法

clearTimeout(id_of_settimeout)
 
 
 

Window clearInterval() 方法

定义和用法

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

语法

clearInterval(id_of_setinterval)
 
 

在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

原生js轮播以及setTimeout和setInterval的理解的更多相关文章

  1. js___原生js轮播

    原生js轮播 作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评: 首先css代码 a{text-decoration:none;color:#3DBBF ...

  2. 原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化

    之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...

  3. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 原生js轮播图

    //用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  5. 手把手原生js轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  6. 用require.js封装原生js轮播图

    index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

  7. 原生JS轮播-各种效果的极简实现

    寒假持续摸鱼中~此为老早以前博客的重写,当时还是分开写的,这里汇总重写,正好复习一遍~ 春招我来了! 所有有意思的,一股脑先扔进收藏,然后再也不看哈哈,真是糟糕. 今日事,今日毕,说起来容易. 当时竟 ...

  8. 原生js轮播图实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 面向对象原生js轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. jquery中奖实例代码

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 借助fastjson 实体对象转map

    private Map<String, Object> object2Map(Object object){ JSONObject jsonObject = (JSONObject) JS ...

  3. WPF基础知识、界面布局及控件Binding

    WPF是和WinForm对应的,而其核心是数据驱动事件,在开发中显示的是UI界面和逻辑关系相分离的一种开放语言.UI界面是在XAML语言环境下开发人员可以进行一些自主设计的前台界面,逻辑关系还是基于c ...

  4. [BS-15] Values of type 'NSInteger' should not be used as format arguments

    Values of type 'NSInteger' should not be used as format arguments 苹果app支持arm64以后会有一个问题:NSInteger变成64 ...

  5. 请求转发（Forward）和重定向（Redirect）的区别

    forward(转发): 是服务器请求资源,服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发给浏览器.浏览器根本不知道服务器发送的内容从哪里来的,因为这个跳转过程实在 ...

  6. Vue.2.0.5-过渡状态

    过渡状态 Vue 的过渡系统提供了非常多简单的方法设置进入.离开和列表的动效.那么对于数据元素本身的动效呢,比如: 数字和运算 颜色的显示 SVG 节点的位置 元素的大小和其他的属性 所有的原始数字都 ...

  7. C++ 基础复习 1

    1. 友元 友元的作用是,友元函数内部可以直接访问外围类的private的字段或方法.通俗的理解就是解决了访问权限的问题. 1) 有点像java的内部类,但是只能在外围类中声明,定义(实现)部分要写在 ...

  8. Volocity循环高级用法

    #foreach($announcementDo in $announcementList) #set($listSize=$!announcementList.size() - 1) #if(($v ...

  9. 仅使用处理单个数字的I/O例程，编写一个过程以输出任意实数（可以是负的）

    题目取自:<数据结构与算法分析:C语言描述_原书第二版>——Mark Allen Weiss   练习1.3 如题. 补充说明:假设仅有的I/O例程只处理单个数字并将其输出到终端,我们将这 ...

  10. Swift游戏实战-跑酷熊猫 12 与平台的碰撞

    这节主要实现熊猫和平台的碰撞,实现熊猫在平台上奔跑 要点 对平台进行物理属性设置 //设置物理体以及中心点 self.physicsBody = SKPhysicsBody(rectangleOfSi ...