10.1 JavaScript概述
10.1.1 JavaScript简介
10.1.1.1 简单性
JavaScrpt是一种脚本语言，采用小程序段的方式实现编程。像其他脚本语言一样JavaScript 同样是一种解释性语言，提供了一个简易的开发过程。
10.1.1.2 动态性
JavaSerpt是动态的，可以直接响应用户或客户的输入，无须经过Web服务程序，通过事动来响应用户的请求。
10.1.1.3 跨平台性
Javascript依赖浏览器，与操作环境无关，只要能运行浏览器的计算机、支持 JavaScript的浏览器就可以正确执行。
10.1.1.4 安全性
JavaScript 是一种安全性语言，不允许访问本地的硬盘，并不能将数据存人到服务器上不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，可有效地防止数据的丢失。
10.1.1.5 基于对象的语言
JavaScript是一种基于对象的语言，同时可以看作是一种面向对象的语言。这意味着它能将特定功能封装在对象中。
10.1.2 JavaScript入门案例
JavaSeript程序不能独立运行，必须依赖HTML文件，通常将JavaScript 代码放置在script标记内，由浏览器JavaScript脚本引擎来解释执行。
语法：<script type="text/javascript">
//(JavaSeript 代码)
</script>
10.1.3 JavaScript放置的位置
JavaScript 代码一般放置在页面的head或body部分。当页面载入时，会自动执行位于body 部分的 JavaScript;而位于 head 部分的 JavaScript 只有被显式调用时才会被执行。
10.1.3.1 head标记中的脚本
script标记放在头部head标记中，通JavaScript代码必须定义成函数形式，并在主体body 标记内调用或通过事件触发。放在head 标记内的脚本在页面装载时同时载入，这样在主体标记内调用时可以直接执行，提高了脚本执行速度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>head中定义的JS函数</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>body中的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("我是body中的JavaScript脚本")
}
</script>
</body>
</html>
运行结果：
10.1.3.3 外部js文件中的脚本
除了将JavaScript代码写在head和body部分以外，也可将JavaScript函数单独写成个js文件，在HTML文档中引用该js文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数调用</title>
<script type="text/javascript">
function sayHello(){
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="sayHello()">点击这里</button>
</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="直接调用JavaSrcipt代码"/>
</form>
</body>
</html>
运行结果： 
10.2 JavaScript语法
10.2.1 语法基础
10.2.1.1 区分大小写
在JavaScript语言中，对大小写是敏感的，这在现在的很多开发语言中都是如此，所以读者要养成一种良好的习惯，这样就可以避免调试程序时遇到这些低级错误。
10.2.1.2 变量不区分类型
JavaScript中变量声明，采用其弱类型，即变量在使用前无须进行变量数据类型声明，而由解释器在运行时检查其数据类型。例如：y="1234"
根据JavaScript 变量的申明方式，可知前者说明x为数值型变量，而后者说明y为字符串型变量。
10.2.1.3 每行代码结尾可以省略分号
在JavaScript里面每条语句结尾的分号";"不是必要的，如果多个语句写在一行上那么语句之间的分号";"才是必需的，最后一条语句的分号";"可以省略。为了养成良好的编程习惯，建议还是在每条语句后面加上分号。
10.2.1.4 注释与C、C++、Java等语言相同
注释就是对代码的解释和说明，目的是为了让别人和自己容易读懂程序。JavaScript的注释形式与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、3com、case、switch等。
10.2.2.2 变量声明
在 JavaScript 语言环境中，变量是用于存储信息的容器，关键字var 可应用于JavaSeript中任何类型的变量声明。JavaScript是采用的隐式变量声明，但要注意在JavaScript语言的任何位置进行隐式变量声明会将变量声明为全局变量，而函数内的局部变量则必须使用var来声明变量，因此，在声明变量时，需要根据变量的作用范围来声明变量。
变量声明格式如下:
var count ; //单个声明
var count ,amount ,level : //用单个var关键字声明的多个变量
var count=0,amount= 100: //一条语句中的变量声明和初始化
10.2.2.3 变量类型
JavaSeript有6种数据类型，主要的类型有Number数值型、Suing字符型、0bject 对象以及Boolean 布尔型，其他两种类型为Null 和 Undefned。
10.2.3 运算符与表达式
JavaScript运算符主要有:算术运算符、关系运算符、逻辑运算符、赋值运算符、条件运算符、逗号运算符等。根据操作数的个数，可以将运算符分为一元运算符、二元运算符和元运算符。
由操作数(变量、常量、函数调用等)和运算符结合在一起构成的式子称为"表达式"，最简单的表达式可以是常量名称。
10.2.3.1 算术运算符和表达式
算术运算符负责算术运算，用算术运算符和运算对象(操作数)连接起来符合规则的式子，称为算术表达式。JavaScript中常用算术运算符见表10-1。
10.2.3.2 关系运算符和表达式
关系运算符用于比较运算符两端的表达式的值，确定二者的关系，根据运算结果返回一个布尔值。用关系运算符和操作数连接起来符合规则的式子，称为关系表达式。Javasenp中常用关系运算符见表10-2。
10.2.3.3 逻辑运算符和表达式
逻辑运算符用来执行逻辑运算，其操作数都应该是布尔型数值和表达式或者是可以转为布尔型的数值和表达式，其运算结果返回true或false。用逻辑运算符和操作数连接起来符合规则的式子，称为逻辑表达式。JavaScript中常用逻辑运算符见表10-3。
10.2.3.4 赋值运算符和表达式
赋值运算符是JavaScript中使用频率最高的运算符之一。赋值运算符要求其左操作数是一个变量、数组元素或对象属性，右操作数是一个任意类型的值，可以为常量、变量、数组元素或对象属性。赋值运算符的作用就是将右操作数的值赋给左操作数。用赋值运算符和操作数连接起来符合规则的式子，称为赋值表达式。JavaScript中常用赋值运算符见表10-4。
10.2.3.5 条件运算符和表达式
条件运算符是一个三元运算符，条件表达式由条件运算符和三个操作数构成。
语法:
变量=表达式1?表达式2:表达式3
说明:
该条件表达式表示，如果表达式1的结果为真(tmue)，则将表达式2的值赋给变量否则将表达式3的值赋给变量。例如，变量numberl、number2比较大小，将较大的数赋值给变量max，代码如下:
var max=( numberl>number2 )? numberl : number2 :
10.2.3.6 逗号运算符和表达式
逗号运算符是一个二元运算符，逗号运算符的优先级最低，由逗号运算符和操作数连接起来符合规则的式子，称为逗号表达式，其运算规则是先计算第一个表达式的值，再计算第二个表达式的值，依次类推，计算完所有表达式的值，运算结果为最后一个表达式的值。
10.2.4 程序设计
JavaScript 脚本语言的基本构成是由控制语句、函数、对象等来实现编程的、其中控制语句主要有条件分支语句和循环语句。
10.2.4.1 条件分支语句
if....else语句完成了程序流程块中分支功能:如果其中的条件成立，则程序执行紧接着条件的语句或语句块;否则;程序执行else中的语句或语句块。其语法如下：
if(条件)
{
/*条件为真执行的语句*/
}
else
{
/*条件为假执行的语句*/
}
swisch分支语句可以根据一个变量或表达式的不同取值采取不同的处理方法，其语法如下：
swilch(表达式)
{
case casel;执行语句l;break;
case case2:执行语句2;break :
case case3;执行语句3;break;
default:默认执行语句;
}
如果表达式取的值同程序中提供的任何一条语句都不匹配，将执行defadtt中的语句关键字 break会使代码跳出switch语句，如果没有关键字break，代码就会继续进入下一个case 分支。
10.2.4.2 循环语句
JavaScript中的循环用来控制同一段代码执行的次数。for 语句是最基本的循环语句,语法如下:
for(变量=开始值;变量<=结束值;变量=变量+步进值)
{
/*循环体语句 */
}
只要循环的条件成立，循环体就被反复的执行。for...in语句与C#中foreach()语句很像，它循环的范围是一个对象所有的属性或是个数组的所有元素。for...in语句的语法如下:
for(变量in对象或数组)
{
/*循环体语句 */
}
while语句所控制的循环，不断地测试条件，如果条件成立、则一直循环，直到条件不再成立。其语法如下:
while(条件)
{
/*循环体语句*/
}
do...while语句表示先执行循环体语句一次，再判断条件是否成立，如果条件还成立则再执行循环体语句，直到条件不再成立。其语法如下:
do
{
/*循环体语句 */
}
while(条件);
break语句结束当前的各种循环，并执行循环的下一条语句。
10.2.5 函数
由事件驱动或当它被调用时执行的可重复使用的代码块称为函数，将脚本编写为函数，这样就可以实现按需调用相应的代码函数。
函数在页面起始位置定义，即网页的<head>部分或定义在外部JS文件里面，然后进行外部调用。
10.2.5.1 定义函数
function函数名(varl，var2，var3)
{
/*函数代码*/
}
varl、var2、var3等指的是传入函数的变量或值，为函数的参数;大括号定义了函数的开始和结束。
10.2.5.2 函数返回值
需要返回某个值的函数必须使用retun语句。例如:
function sum( a , b)
{
x= a+ b;
return x;
}
JavaScript中的函数无须对函数的返回值进行申明，直接使用return，返回值的类型可以是本节提到的6种类型中的任意一种。
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 World!");
}
</script>
</head>
<body>
<button onclick="sayHello()">单击这里</button>
</body>
</html>
运行结果： 
10.3 JavaScript对象
10.3.1 对象基础
10.3.1.1 概述
JavaScript 编程是使用"面向对象"的概念，也称为"对象化编程"。JavaSeript"面向对象编程"的意思就是把JavaScript能涉及的范围划分成大大小小的对象，对象下面还继续划分对象，所有的编程都以对象为出发点，基于对象，小到一个变量，大到网页文档、窗口甚至屏幕，都是对象。
在JavaScript里面可以创建自己的对象，但在创建用户自定义对象前，需要先学习创建的JavaScript对象，以及如何使用它们。本节后续开始将具体地依次讲解JavaSeript 的内建对象。
JavaScript的对象可分为本地对象或内置对象、Browser对象和HTML DOM 对象
(1)本地对象。本地对象就是ECMA-262标准内定义的类，见表10-5
(2)Browser对象。BrowserObjects也可被称作BOM，是用来与浏览器窗体网页产生互动的对象。Browser对象列表见表10-6。
(3)HTMLDOM对象。HTMLDOM定义了用于HTML的一系列标准对象，以及访问和处理 HTML文档的标准方法。其中，最重要的一个对象就是document对象，document 代表整个HTML文档，用来访问页面中的所有元素。
10.3.1.2 属性
属性是对象的特性值的表述，例如:
<script type=" text/javascript" >
var str = 'Hello World!';
document.writeln (str.length);
</script>
以上示例定义了一个字符串变量，其实字符串也是一个对象，lengh作为st对象的属性用来取得字符串的长度。
JavaScrpt内建对象的属性可以参阅相关的技术文档，当然在Visual Studio 平台中由于有智能感应功能，就可以很方便地访问对象的属性。
10.3.1.3 方法
方法指对象可以执行的行为(或可以完成的功能)，与属性相同，JavaScrpt内建对象本身就自带了很多功能强大的方法，可以直接调用来完成某些特定的功能，例如:
var str =Hello World!
document.writeln(str.toUpperCase());
运行结果为:
HELLO WORLD!
以上示例使用了字符串对象的toUpperCase()方法，其功能是将s字符串全部转变为大写字母。
10.3.2 常用对象
10.3.2.1 window对象
window对象表示一个浏览器窗口或一个框架。在客户端JavaSeript中，window对象是全局对象，所有的表达式都在当前的环境中计算。
(1)窗口操作。window对象是JavaScript中最大的对象，主要用于操作浏览器窗口。通
常要引用它的属性和方法时不用window.xx形式，而直接使用方法名称即可。
通过 window对象移动或调整浏览器窗口的大小，有4种方法:
moveBy(x，y):从当前位置水平移动窗体x个像素，垂直移动窗体个像素。x为负将向左移动窗体;y为负数，将向下移动窗体。
moveTo(x，y):移动窗体左上角到相对于屏幕左上角的(x，y)点。当使用负数作为参数时，窗体会移出屏幕的可视区域。
resizeBy(w，h):相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体。
resizeTo(w，h):把窗体宽度调整为w个像素，高度调整为h个像素。
(2)打开窗口。用open()打开新窗口。
(3)关闭窗口。用close()关闭窗口。
(4)系统对话框。window 对象有三种常用的对话框:
alert():显示提示信息，不能对脚本产生任何改变。常见于提醒用户信息不完整、有
误等情况。
confrm():弹出消息对话框(对话框中包含一个0K按钮与一个Caneel按钮)，一般用于确认信息，返回true或fale，所以主要用于i......else...判断。常见于用户对信息更改前的确认。
prompt():一个带输入框的对话框，可以返回用户填人的字符串，常见于某些留言板或论坛输人内容那里的插入 UBB 格式图片。
(5)history历史对象。window 对象中的history历史对象包含了用户已测览的 URL,的信息，是指浏览器的浏览历史。鉴于安全性的需要，该对象有很多限制。bistony历史对象有length这个属性来列出历史的项数。JavaScript所能管到的历史被限制在用测览器的"前进"后退"键链接到的范围。
history历史对象有以下方法:
back():后退，与按下"后退"键是等效的。
forward():前进，与按下"前进"键是等效的。
go():用法为history.go(x);在历史的范围内指向指定的URL访问地址。如果 x<0,则后退x个地址;如果x>0，则前进x个地址;如果x=0，则刷新现在打开的网页。
<!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'myWindow");
</script>
<input type="button" value="Move 'myWindow'" onclick="moveWin()"/>
</body>
</html>
运行结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>confirm()的使用</title>
</head>
<body>
<script>
var userChoice = window.confirm("请选择"确定"或"取消"");
if(userChoice == true){
document.write("OK!");
}
if(userChoice == false){
document.write("Cancel!");
}
</script>
</body>
</html>
运行结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>prompt的使用</title>
</head>
<body>
<script type="text/javascript">
document.write("您的爱好是---"+prompt('请问您的爱好?','请输入'));
</script>
</body>
</html>
运行结果：
10.3.2.2 document对象
document 本身是一个对象，但又是JavaScript中 window对象和 frames 对象的一个属性其描述当前窗口或指定窗口对象的文档。它包含文档从<head>标签到</body>标签的全部内容。
用法为 document 或<窗口对象>.document，其中 document 表示当前窗口的文档，<窗口象>.document 表示指定窗口的文档。
(1)document对象属性。表10-7为document 对象比较常用的属性。
(2)document对象方法。document 对象方法与描述见表10-8。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document属性</title>
</head>
<body>
<img src="img/1.bmp" BORDER="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>
运行结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document方法</title>
</head>
<body>
<br/>
<div id="book">网页设计基础</div>
<br/>
<script type="text/javascript">
var book= document.getElementById("book");
book.onclick=msg;
function msg(){
alert(book.innerText);
}
</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的一部分。其具体描述见表10-9。
(2)location 对象方法。location对象方法见表10-10。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location对象属性</title>
<script type="text/javascript">
function currLocation(){alert(window.location)}
function newLocation(){window.location="例10.11.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。navigator对象属性及其描述见表10-11。
(2)navigator对象方法。navigator对象方法见表10-12。
10.3.2.5 screen对象
screen 对象用于获取用户的屏幕信息，是window对象的属性
每个window对象的screen属性都引用一个sereen对象。可以通过sereen 对象获取一些用户屏幕的信息，如宽度、高度、像素等，而这些信息对于设置图片和页面在浏览器中显示的大小都是非常有用的。screen对象的属性应用和浏览器的关系比较密切，所以在应用这些属性时，一定要注意浏览器之间的兼容性。sereen 对象属性的具体描述见表10-13。
10.4 JavaScript事件
10.4.1 事件及事件处理
JavaScript 中的事件是可以被JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。例如，在用户单击页面中某按钮时产生一个onClick事件。事件可以是用户在某些内容上的单击、鼠标经过特定元素或按下了键盘上的按键:也可以是某个 Web 页面加载完成、用户改变了窗口的大小或是滚动了窗口等。
事件处理是对象化编程的一个重要环节，JavaScript会为特定文档元素的特定类型事件注册一个事件处理程序，该处理程序可以是个函数，也可以是一段代码。事件处理的过程可以这样表示:发生事件一启动事件处理程序一事件处理程序做出反应。其中，要使事件处理程序能够启动，必须先告诉对象发生了什么事情，要启动什么处理程序。事件的处理程序可以是任意 JavaScript 语句，但是一般用特定的自定义函数来处理。
10.4.2 常用事件
JavaScript中常用事件主要包括一般页面事件、鼠标事件、键盘事件等。表10-14、10-15、表10-16为这三类事件中的常用事件描述。
10.4.3 事件应用举例
事件的应用常见于下面几种场景:鼠标单击某一元素、页面或图像载入、鼠标悬浮于页面的某个热点之上、在表单中选取输入框、确认表单、键盘按键等。下面通过几个示例来学习事件的具体应用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onLoad事件</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>onchange事件</title>
<script type="text/javascript">
function myFuntion(){
var x = document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
请输入英文字符:<input type="text" id="fname" onchange="myFuntion()"/>
<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.backgroundColor="bule";
obj.innerHTML="请释放鼠标按钮";
}
function mouseUp(obj){
obj.style.backgroundColor="red";
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="mouseUp(this)"
style="background-color: green;width: 120px;height: 20px;padding: 20px;color: #ffffff;">
请按下鼠标按钮
</div>
</body>
</html>
运行结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件</title>
<script type="text/javascript">
function keyDown(){
alert("你按下了按键");
if(event.ctrIKey){
alert("你按下了Ctrl键");
}
}
function keyPress(){
alert("你按下了键，并且释放了按键");
}
</script>
</head>
<body onkeydown="keyDown()" onkeypress="keyPress()">
</body>
</html>
运行结果：
10.5 综合案例------轮播广告
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片播放效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
text-decoration: none;
}
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>
<script type="text/javascript">
window.onload=function(){
var container = document.getElementById('container');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').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/p1.jpg" alt="1" />
</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:void(0);" id="prev" class="arrow"><</a>
<a href="javascript:void(0);" id="next" class="arrow">></a>
</div>
</body>
</html>
运行结果：