第十章JavaScript的应用-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_80780936/article/details/143873517

10.1 JavaScript概述

10.1.1 JavaScript简介

JavaScript是一种基于对象(Object)和事件驱动(Event Driven )并具有安全性能的脚本语言,能够与HTML(超文本标记语言)、Java 语言一起在Web页面中与Web客户交互,它无须经过先将数据传给服务器端(Server)、再传回来的过程,而直接可以由客户端(Client)的应用程序处理,从而可以开发客户端的应用程序等。JavaScript是通过嵌入或调入在标准的HTML语言中实现的,弥补了HTML语言的缺陷,是Java与HTML折中的选择,通常具有以下特点。

10.1.1.1 简单性

JavaScript是一种脚本语言,采用小程序段的方式实现编程。像其他脚本语言一样,JavaScript同样是一种解释性语言,提供了一个简易的开发过程。

10.1.1.2 动态性

JavaScript是动态的,可以直接响应用户或客户的输入,无须经过Web服务程序,通过事动来响应用户的请求。

10.1.1.3 跨平台性

JavaScrip依赖测览器,与操作环境无关,只要能运行浏览器的计算机、支持 JavaScn 的浏览器就可以正确执行。

10.1.1.4 安全性

JavaScript是一种安全性语言,不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,可有效地防止数据的丢失。

10.1.1.5 基于对象的语言

JavaScript是一种基于对象的语言,同时可以看作是一种面向对象的语言。这意味着它能将特定功能封装在对象中。

10.1.2 JavaScript入门案例

JavaScript 程序不能独立运行,必须依赖HTML文件,通常将JavaScript代码放置在script标记内,由浏览器JavaScript 脚本引擎来解释执行。

说明:
script标记是成对标记,以&lt;script&gt;开始,以&lt;/script&gt;结束。type属性说明脚本的类型,属性值"text/javascript"意思是使用Javascript编写的程序是文本文件。script标记既可以放在HIML的头部,也可以放在HTML的主体部分,只是装载的时间不同。

10.1.3 JavaScript放置的位置

JavaScript代码一般放置在页面的head 或body 部分。当页面载入时,会自动执行位于body部分的JavaScript;而位于head部分的JavaScript只有被显式调用时才会被执行。

10.1.3.1 head标记中的脚本

script标记放在头部head 标记中,通JavaScript 代码必须定义成函数形式,并在主体body标记内调用或通过事件触发。放在head 标记内的脚本在页面装载时同时载入,这样在主体标记内调用时可以直接执行,提高了脚本执行速度。

说明:
JavaScript自定义函数必须以function关键字开始,然后给自定义函数命名,函数命名时一定遵守标识符命名规范。函数名称后面一定要有一对括号"()",括号内可以有参数,$()$也可以无参数,多个参数之间用逗号","分隔。函数体语句必须放在大括号"{}"内。
[例10.2]在head标记内定义两个JavaScript函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function message(){
				alert("调用JS函数！sum((100,200)="+sum(100,200));
			}
			function sum(x,y){
			return x+y;
			}//返回函数计算结果
		</script>
	</head>
	<body>
		<h4>head标记内定义两个JS函数</h4>
		<p>无返回值函数：message()</p>
		<p>有返回值函数：sum(x,y)</p>
		<form>
			<input name="btncal" type="button" onclick="message():"value="计算并显示两个数的和"/>
		</form>
	</body>
</html>

10.1.3.2 body标记中的脚本

script标记放在主体body标记中,JavaScript 代码可以定义成函数形式,在主体body标记内调用或通过事件触发。也可以在script 标记内直接编写脚本语句,在页面装载时同时执行相关代码,这些代码执行的结果直接构成网页的内容,在浏览器中可以查看。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>boby中JavaScript脚本</title>
	</head>
	<body>
	<p id="clk">Clicke Here</p>
	<script type="text/javascript">
		var demo=document.getElementById("clk")
		demo.onclick=msg;
		function msg(){
			alert("我是boby中JavaScript脚本")
		}
	</script>
	</body>
</html>

10.1.3.3 外部js文件中的脚本

除了将JavaScript代码写在head和body部分以外,也可将JavaScript 函数单独写成个js 文件,在HTML文档中引用该js文件。

Js:

function message(){
	alert("调用外部js文件的JavaScript函数!");
}

Html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/demo.js">
			document.write("这条语句没有执行，被忽略掉了！");
		</script>
	</head>
	<body>
		<form>
			<input name="btn1" type="button" onclick="message()" value="调用外部js文件的JavaScript函数"/>
		</form>
	</body>
</html>

10.1.3.4 事件处理代码中的脚本

JavaScript代码除了上述三种放置位置外，还可以直接写在事件处理代码中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>直接在事件处理代码中加入JavaScript代码</title>
	</head>
	<body>
		<form>
			<input type="button" onclick="alert('直接在事件处理代码中加入JavaScript代码')" value="直接调用JavaScript代码"/>
		</form>
	</body>
</html>

10.2 JavaScript语法

10.2.1 语法基础

任何语言的语法学习都是枯燥、单调的,JavaScript 语法也一样,但学好语法是更好地使用JavaScript 编写程序的前提。

在运用JavaScript 语言编写程序时应注意以下几点:

区分大小写：在JavaScript语言中,对大小写是敏感的,这在现在的很多开发语言中都是如此,所以读者要养成一种良好的习惯,这样就可以避免调试程序时遇到这些低级错误。
变量不区分类型：JavaScript中变量声明,采用其弱类型,即变量在使用前无须进行变量数据类型声明,而由解释器在运行时检查其数据类型,根据JavaScript变量的申明方式,可知前者说明x为数值型变量,而后者说明y为字符串型变量。
每行代码结尾可以省略分号：在JavaScript里面每条语句结尾的分号";"不是必要的,如果多个语句写在一行上,那么语句之间的分号";"才是必需的,最后一条语句的分号";"可以省略。为了养成良好的编程习惯,建议还是在每条语句后面加上分号。
注释与C、C++、Java等语言相同：注释就是对代码的解释和说明,目的是为了让别人和自己容易读懂程序。JavaSeript的注释形式与C、C++、Java等语言相同,格式如下:
//单行注释/* 多行注释*/

10.2.2 标识符和常用变量

10.2.2.1 标识符

标识符是计算机语言中用来表示变量名、函数名等的有效字符序列,简单来说,标识符就是一个名字,JavaScript关于标识符的规定如下:
(1)必须使用英文字母或者下划线开头。
(2)必须使用英文字母、数字、下划线组成,不能出现空格或制表符。
(3)不能使用JavaScript关键字与JavaScript保留字。
(4)不能使用JavaScript 语言内部的单词,比如Infinity,NaN,undefined等。
(5)大小写敏感,如name和Name是不同的两个标识符。
合法的标识符:Hello、_12th、sum、Dog23等。
不合法的标识符:if、33com、case、switch等。

10.2.2.2 变量声明

在JavaScript语言环境中,变量是用于存储信息的容器,关键字var可应用于JavaSeript 中任何类型的变量声明。JavaScript 是采用的隐式变量声明,但要注意在JavaScript语言的任何位置进行隐式变量声明会将变量声明为全局变量,而函数内的局部变量则必须使用var来声明变量,因此,在声明变量时,需要根据变量的作用范围来声明变量。
变量声明格式如下:
var count;//单个声明var count,amount,level;//用单个var关键字声明的多个变量lvar count=0amount=100;//一条语句中的变量声明和初始化
var count,amount,level;//用单个var关键字声明的多个变量
var count=0amount=100;//一条语句中的变量声明和初始化

10.2.2.3 变量类型

JavaScript有6种数据类型,主要的类型有Number数值型、String 字符型、Object对象，以及Boolean 布尔型,其他两种类型为Null和Undefined。
(1)Number数值型。JavaScript支持整数和浮点数。整数可以为正数、0或负数;浮点数包含小数点,例如3.53、$-534.87$等都是浮点数。浮点数还可以采用科学计数法进行表示,如3.5E15表示$3.5\times {10}^{15}$。
(2)String字符型。字符型数据又称为字符串型,由若干个字符组成,并且用单引号或双引号封装起来,例如:"你好!""this is string""学习语言"。
在使用字符串的过程中,有时会遇到一种情况:在一个字符串中需要使用单引号或双引号。正确的方法是在由双引号标记的字符串中引用字符时使用单引号,在由单引号标记的字符串中引用字符时使用双引号,即单引号、双引号必须成对使用相互包含,但不能交叉。
(3)Boolean布尔型。Boolean 值有true和false,这是两个特殊值,可以将他们转换为其他类型的数据,例如可将值为true的布尔型数据转换为整数1,而将值为false的布尔型数据转换为整数0。但不能用true表示1或false表示0。
(4)Undefined 数据类型。JavaScript会对未赋值变量赋值为undefined。
(5)Null数据类型。这是一个对象,但是为空。因为是对象,所以 typeof null返回"$objec{t}^{39}$,注意null是Javascript保留关键字。
(6)Object类型。除了上面提到的各种常用类型外,对象类型也是JavaScript中的重要组成部分

10.2.3 运算符与表达式

JavaScript运算符主要有:算术运算符、关系运算符、逻辑运算符、赋值运算符、条件运算符、逗号运算符等。根据操作数的个数,可以将运算符分为一元运算符、二元运算符和三元运算符。
由操作数(变量、常量、函数调用等)和运算符结合在一起构成的式子称为"表达式",最简单的表达式可以是常量名称。

10.2.3.1 算术运算符和表达式

算术运算符负责算术运算,用算术运算符和运算对象(操作数)连接起来符合规则的式子,称为算术表达式。

10.2.3.2 关系运算符和表达式

关系运算符用于比较运算符两端的表达式的值,确定二者的关系,根据运算结果返回一个布尔值。用关系运算符和操作数连接起来符合规则的式子,称为关系表达式。

10.2.3.3 逻辑运算符和表达式

逻辑运算符用来执行逻辑运算,其操作数都应该是布尔型数值和表达式或者是可以转为布尔型的数值和表达式,其运算结果返回true或false。用逻辑运算符和操作数连接起来符合规则的式子,称为逻辑表达式。

10.2.3.4 赋值运算符和表达式

赋值运算符是JavaScript中使用频率最高的运算符之一。赋值运算符要求其左操作数是一个变量、数组元素或对象属性,右操作数是一个任意类型的值,可以为常量、变量、数组、元素或对象属性。赋值运算符的作用就是将右操作数的值赋给左操作数。用赋值运算符和操作数连接起来符合规则的式子,称为赋值表达式。

10.2.3.5 条件运算符和表达式

条件运算符是一个三元运算符,条件表达式由条件运算符和三个操作数构成。
语法:
变量=表达式1?表达式2:表达式3
说明:
该条件表达式表示,如果表达式1的结果为真(true),则将表达式2的值赋给变量,否则将表达式3的值赋给变量。例如,变量number l、number2比较大小,将较大的数赋值给变量max,

10.2.3.6 逗号运算符和表达式

逗号运算符是一个二元运算符,逗号运算符的优先级最低,由逗号运算符和操作数连接起来符合规则的式子,称为逗号表达式,其运算规则是先计算第一个表达式的值,再计算第二个表达式的值,依次类推,计算完所有表达式的值,运算结果为最后一个表达式的值

10.2.4 程序设计

JavaScript 脚本语言的基本构成是由控制语句、函数、对象等来实现编程的,其中控制语句主要有条件分支语句和循环语句。

10.2.4.1 条件分支语句

if···else语句完成了程序流程块中分支功能:如果其中的条件成立,则程序执行紧接着条件的语句或语句块;否则;程序执行else中的语句或语句块。

10.2.4.2 循环语句

JavaScript中的循环用来控制同一段代码执行的次数。for语句是最基本的循环语句

10.2.5 函数

由事件驱动或当它被调用时执行的可重复使用的代码块称为函数,将脚本编写为函数,这样就可以实现按需调用相应的代码函数。
函数在页面起始位置定义,即网页的$1\lt head\gt $部分或定义在外部JS文件里面,然后进行外部调用。

10.2.5.1 定义函数

function 函数名（var1，var2，var3）

{

/*函数代码*/

}

var1，var2，var3等指的是传入函数的变量或值，为函数的参数；大括号定义了函数的开始和结束。

10.2.5.2 函数返回值

需要返回某个值的函数必须使用return语句，例如：

function sum（a，b）

{

x=a+b；

return x；

}

return返回，返回值的类型有六种。

10.2.5.3 函数调用

函数的调用很简单,可以通过其名字加上括号中的参数进行调用。如调用上面的sum 函数,可以这样写:sum(5,8)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数调用</title>
		<script type="text/javascript">
			function sayHello(){
				alert("Hello Word!");
			}
		</script>
	</head>
	<body>
		<button onclick="sayHello()">单机这里</button>
	</body>
</html>

10.3 JavaScript对象

10.3.1 对象基础

10.3.1.1 概述

JavaScript 编程是使用“面向对象”的概念，也称为“对象化编程”。JavaScript“面向对象编程”的意思就是把 JavaScript能涉及的范围划分成大大小小的对象，对象下面还继续划分对象，所有的编程都以对象为出发点，基于对象，小到一个变量，大到网页文档、窗口甚至屏幕，都是对象。
在JavaScript里面可以创建自己的对象，但在创建用户自定义对象前，需要先学习创建的JavaScript对象，以及如何使用它们。本节后续开始将具体地依次讲解JavaScript的内建对象。
在JavaScript里面创建一个新的空对象，例如：
var o= new object();
JavaScript的对象可分为本地对象或内置对象、Browser对象和HTML DOM对象。
（1）本地对象。本地对象就是ECMA-262标准内定义的类。

全局对象是预定义的对象，作为JavaScript的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他预定义的对象、函数和属性。全局对象不是任何对象的属性，所以它没有名称。
全局对象只是一个对象，而不是类，它既没有构造函数，也无法实例化一个新的全局对象。
（2）Browser对象。Browser Objects也可被称作BOM，是用来与浏览器窗体网页产生互动的对象。

（3）HTML DOM 对象。HTML DOM定义了用于HTML的一系列标准对象，以及访问和处理HTML文档的标准方法。其中，最重要的一个对象就是document对象，document代表整个HTML文档，用来访问页面中的所有元素。

10.3.1.2 属性

属性是对象的特性值的表述

<script type="text/javascript">
var str = Hello World!;
document. writeln( str. length);
</script>

10.3.1.3 方法

方法指对象可以执行的行为（或可以完成的功能），与属性相同，JavaScript内建对象本就自带了很多功能强大的方法，可以直接调用来完成某些特定的功能

var str =Hello World!
document. writeln(str.toUpperCase());

10.3.2 常用对象

10.3.2.1 window对象

window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript中，window对象是全
局对象，所有的表达式都在当前的环境中计算。
（1）窗口操作。window对象是JavaScript中最大的对象，主要用于操作浏览器窗口。通常要引用它的属性和方法时不用 window.xx形式，而直接使用方法名称即可。

通过window对象移动或调整浏览器窗口的大小，有4种方法：
moveBy（x，y）：从当前位置水平移动窗体x个像素，垂直移动窗体y个像素。x为负
数，将向左移动窗体；y为负数，将向下移动窗体。

moveTo（x，y)：移动窗体左上角到相对于屏幕左上角的（x，y）点。当使用负数作为
参数时，窗体会移出屏幕的可视区域。

resizeBy（w，h）：相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如
果参数为负值，将缩小窗体，反之扩大窗体。

resizeTo（w，h)：把窗体宽度调整为w个像素，高度调整为h个像素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function moveWin(){
			myWindow.moveTo(50,50);	
			}
		</script>
	</head>
	<body>
		<script type="text/javascript">
			myWindow=window.open(",",'width=200,height=100')
			myWindow.document.write("This is 'My Window' ");
		</script>
		<input type="button" value="More'myWindow()' "/>
	</body>
</html>

（2）打开窗口。用open（）打开新窗口。

（3）关闭窗口。用close（）关闭窗口。

（4）系统对话框：alert（），confirm（），prompt（）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var userChoice=window.confirm("请选择'确认'或'取消'");
			if(userChoice==true){
				document.write("OK!");
			}
			if(userChoice==false){
				document.write("Cance!");
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			document.write("您的爱好是---"+prompt("请问您的爱好？','请输入"));
		</script>
	</body>
</html>

（5）history历史对象：back（）后退，forward（）前进，go（）在历史的指定范围内指定的URL访问地址。

10.3.2.2 document对象

document本身是一个对象，但又是JavaScript中 window对象和 frames 对象的一个属性，其描述当前窗口或指定窗口对象的文档。它包含文档从<head>标签到</body>标签的全部内容。用法为document或<窗口对象>.document，其中 document表示当前窗口的文档，<窗口对象>.document表示指定窗口的文档。
（1） document对象属性。

（2）document对象方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="img/1.bmp" BOREDER="0" alt=""/><br/>
		<script type="text/javascript">
			document.write("文件地址："+document.location+"<br/>")
			document.write("文件标题："+document.title+"<br/>")
			document.write("图片路径："+document.images[0].src+"<br/>")
		</script>
	</body>
</html>

10.3.2.3 location对象

location 对象用于获取或设置窗体的URL，并且可以用于解析URL，是JavaScript中最重
要的对象之一，location 的中文意思是“位置”。location既是 window对象的属性又是
document 对象的属性，即“window.location== document. location;”。
（1）location 对象属性。location对象包含8个属性，最重要的一个是href属性，代表当
前窗体的URL，其余7个都是当前窗体的URL的一部。

（2）location 对象方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function currLocation(){
				alert(window.location)
			}
			function newLocation(){
				window.location="示例10.19.html"
			}
		</script>
	</head>
	<body>
		<input type="button" onclick="currLocation()" value="显示当前的URL"/>
		<input type="button" onclick="newLocation()" value="改变URL"/>
	</body>
</html>

10.3.2.4 navigator对象

navigator对象的中文意思为“导航器”，通常用于检测浏览器与操作系统的版本，也是
window 对象的属性。
由于navigator没有统一的标准，因此各个浏览器都有自己不同的 navigator版本，navigator的属性和方法也会有一定的不同。这里介绍普遍支持且常用的部分属性和方法。
（1）navigator 对象属性。navigator中最重要的是 userAgent属性，它用来返回包含浏览
器版本等信息的字符串；其次cookieEnabled也很重要，使用它可以判断用户浏览器是否开启cookie。

10.3.2.5 screen对象

screen 对象用于获取用户的屏幕信息，是window对象的属性。
每个window 对象的screen属性都引用一个screen对象。可以通过 screen对象获取一些
屏幕的信息，如宽度、高度、像素等，而这些信息对于设置图片和页面在浏览器中显示
肤小都是非常有用的。screen对象的属性应用和浏览器的关系比较密切，所以在应用这些
胜时，一定要注意浏览器之间的兼容性。

10.4 JavaScript事件

10.4.1 事件及事件处理

JavaScript中的事件是可以被 JavaScript侦测到的行为。网页中的每个元素都可以产生某
些可以触发JavaScript函数的事件。例如，在用户单击页面中某按钮时产生一个 onClick事
件。事件可以是用户在某些内容上的单击、鼠标经过特定元素或按下了键盘上的按键；也可
以是某个Web页面加载完成、用户改变了窗口的大小或是滚动了窗口等。
事件处理是对象化编程的一个重要环节，JavaScript会为特定文档元素的特定类型事件注册一个事件处理程序，该处理程序可以是个函数，也可以是一段代码。事件处理的过程可以这样表示：发生事件→启动事件处理程序→事件处理程序做出反应。其中，要使事件处理程序能够启动，必须先告诉对象发生了什么事情，要启动什么处理程序。事件的处理程序可以是任意JavaScript语句，但是一般用特定的自定义函数来处理。
指定事件处理程序有三种方法：

（1）直接在HTML标记指定。

（2）编写特定对象特定事件的JavaScript。

一般形式：<script language="JavaScript" for="对象" event="事件">

（3）在JavaScript中说明。

一般形式：<主角事件-对象>.<事件>=<事件处理程序>

10.4.2 常用事件

10.4.3 事件应用举例

事件的应用常见于下面几种场景：鼠标单击某一元素、页面或图像载入、鼠标悬浮于页面的某个热点之上、在表单中选取输入框、确认表单、键盘按键等。下面通过几个示例来学习事件的具体应用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="checkCookies()">
		<script type="text/javascript">
			function checkCookies(){
				if(navigator.cookieEnabled==true)
				alert("已启用Cookie");
				else
				alert("未启用Cookie")
			}
		</script>
		<p>提示框会告诉你，浏览器是否已启用Cookie。</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function myFunction(){
				var x=document.getElementById("fname");
				x.value=x.toUpperCase();
			}
		</script>
	</head>
	<body>
		请输入英文字符：<input type="button" id="fname" onchange="myFunction()"/>
		<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
	</body>
</html>

鼠标事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function mouseOver(obj){
				obj.style.color="blue";
				obj.innerHTML="把鼠标移开"
			}
			function mouseOut(obj){
				obj.style.color="red";
				obj.innerHTML="把鼠标移到上面"
			}
			function mouseDown(obj){
				obj.style.color="blue";
				obj.innerHTML="请按下鼠标按钮"
			}
		</script>
	</head>
	<body>
		<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)"
		style="background-color: green; width: 120px;height: 20px;padding: 20px;color: #ffffff;">
		把鼠标移到上面
		</div>
		<br />
		<div onmousedown="mouseDown()(this)" onmouseup="onmouseup(this)"
		style="background-color: green; width: 120px;height: 20px;padding: 20px;color: #ffffff;">
		请按下鼠标按钮
		</div>
	</body>
</html>

onkeydown，onkeypress事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function keyDown(){
				alert("你按下了按键");
				if(event.ctrlKey){
					alert("你按下了Ctrl键");
				}
			}
			function keyPress(){
				alert("你按下了键,并且释放了按键");
				}
		</script>
	</head>
	<body onkeydown="keyDown()" onkeypress="keyPress()">
	</body>
</html>

10.5 综合案例——轮播广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				text-decoration: no;
			}
			body{
				padding: 20px;
			}
			#container{
				position: relative;
				width: 600px;
				height: 400px;
				border: 1px solid #333;
				overflow: hidden;
				margin-left: auto;
				margin-right: auto;
			}
			#list{
				position: absolute;
				z-index: 1;
				width: 4200px;
				height: 400px;
			}
			#list img{
				float: left;
				width: 600px;
				height: 400px;
			}
			#buttons{
			position: absolute;
			left: 250px;
			bottom: 20px;
			z-index: 2;
			height: 10px;
			width: 100px;
		}
		#buttons span{
			float: left;
			margin-right: 5px;
			width: 10px;
			height: 10px;border: 1px solid #fff;
			border-radius: 50%;
			background: #333;
			cursor: pointer;
		}
		#buttons.on{
			background: orangered;
		}
		.arrow{
			position: absolute;
			top: 180px;
			z-index: 2;
			display: none;
			width: 40px;
			height: 40px;
			font-size: 36px;
			font-weight: bold;
			line-height: 39px;
			text-align: center;
			color: #fff;
			background-color: RGBA(0,0,0,.3);
			cursor: pointer;
		}
		.arrow:hover{
			background-color: RGBA(0,0,0,.7);
		}
		#container:hover.arrow{
			display: block;
		}
		#prev{
			left: 20px;
		}
		#next{
			right: 20px;
		}
		</style>
	</head>
	<body>
		<script type="text/javascript">
					window.onload = function(){
						var container = document.getElementById('container');
						var list = document.getElementById('list');
						var buttons = document.getElementById('butttons').getElementsByTagName('span');
						var prev = document.getElementById('prev');
						var next = document.getElementById('next');
						var index = 1;
						var timer;
						function animate(offset){
							var newLeft = parseInt(list.style.left)+offset;
							list.style.left = newLeft + 'px';
							if(newLeft > -600){
								list.style.left = -3000+'px';
							}
							if(newLeft < -3000){
								list.style.left = -600+'px';
							}
						}
						function play(){
							timer = setInterval(function(){
								next.onclick();
							},2000)
						}
						function stop(){
							clearInterval(timer);
						}
						function buttonsShow(){
							for(var i=0;i<buttons.length;i++){
								if(buttons[i].className == "on"){
									buttons[i].className ="";
								}
							}
							buttons[index-1].className="on";
						}
						prev.onclick = function(){
							index-=1;
							if(index<1){
								index=5
							}
							buttonsShow();
							animate(600);
						};
						next.onclick = function(){
							index+=1;
							if(index >5){
								index=1
							}
							animate(-600);
							buttonsShow();
						};
						for(var i = 0;i<buttons.length;i++){
							(function(i)){
								buttons[i].onclick = function(){
									var clickIndex = parseInt(this.getAttribute('index'));
									var offset = 600 * (index-clickIndex);
									animate(offset);
									index = clickIndex;
									buttonsShow();
								}
							})(i)
						}
						container.onmouseover =stop;
						container.onmouseout = play;
						play();
					}
				</script>
			</head>
			<body>
				<div id="container">
					<div id="list" style="left: -600px;">
						<img src="../img/p5.jpg" alt="5"/>
						<img src="../img/p1.jpg" alt="1"/>
						<img src="../img/p2.jpg" alt="2"/>
						<img src="../img/p3.jpg" alt="3"/>
						<img src="../img/p4.jpg" alt="4"/>
						<img src="../img/p5.jpg" alt="5"/>
						<img src="../img/1.bmp" alt="5"/>
					</div>
					<div id="buttons">
						<span index="1" class="on"></span>
						<span index="2"></span>
						<span index="3"></span>
						<span index="4"></span>
						<span index="5"></span>
					</div>
					<a href="javascript:;" id="prev" class="arrow">&lt;</a>
					<a href="javascript:;" id="next" class="arrow">&lt;</a>
				</div>

	</body>
</html>