第十章 JavaScript的应用
10.1 JavaScript概述
10.1.1 JavaScript简介
JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言，能够与HTML（超文本标记语言）、Java语言一起在Web页面中与Web客户交互、它无须经过先将数据传给服务器端(Server)、再传回来的过程，而直接可以由客户端(Client)的应用程序处理，从而可以开发客户端的应用程序等。JavaScript是通过嵌入或调入在标准的HTML语言中实现的，弥补了HTML语言的缺陷，是Java与HTML折中的选择，通常具有以下特点。
1.简单性
JavaScript是一种脚本语言，采用小程序段的方式实现编程。像其他脚本语言一样，JavaScript 同样是一种解释性语言，提供了一个简易的开发过程。
2.动态性
JavaScript是动态的，可以直接响应用户或客户的输人，无须经过Web服务程序，通过事动来响应用户的请求。
3.跨平台性
JavaScrip依赖浏览器，与操作环境无关，只要能运行浏览器的计算机、支持JavaScript的浏览器就可以正确执行。
4.安全性
JavaScript是一种安全性语言，不允许访问本地的硬盘，并不能将数据存入到服务器上不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，可有效地防止数据的丢失。
5.基于对象的语言
JavaScript是一种基于对象的语言，同时可以看作是一种面向对象的语言。这意味着它能将特定功能封装在对象中。
10.1.2 JavaScript入门案例
JavaScript 程序不能独立运行，必须依赖HTML文件，通常将JavaScript代码放置在script标记内，由浏览器JavaScript脚本引擎来解释执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>入门案例JavaScript代码</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello Word!");
</script>
</body>
</html>
10.1.3 JavaScript放置的位置
JavaScript 代码一般放置在页面的head或body部分。当页面载入时，会自动执行位于body 部分的JavaScript：而位于head部分的JavaScript只有被显式调用时才会被执行。
1.head标记中的脚本
script 标记放在头部head标记中，通JavaScript代码必须定义成函数形式，并在主体body标记内调用或通过事件触发。放在head标记内的脚本在页面装载时同时载入，这样在主体标记内调用时可以直接执行，提高了脚本执行速度。
语法：
function functionname（参数1，参数2，……，参数n）{
函数具体语句
}
<!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>
2.body标记中的脚本
script标记放在主体body标记中，JavaScript代码可以定义成函数形式，在主体body标记内调用或通过事件触发。也可以在script标记内直接编写脚本语句，在页面装载时同时执行相关代码，这些代码执行的结果直接构成网页的内容，在浏览器中可以查看。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></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>
3.外部js文件中的脚本
除了将JavaScript代码写在head和bodv部分以外，也可将IavaScrint函数单独写成个js文件，在HTML文档中引用该js文件。
function message(){
alert("happy");
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>调用外部js文件的javascrip函数</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>
4.事件处理代码中的脚本
JavaScript代码除了上述三种放置位置外，还可直接写在事件处理代码中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>直接在事件处理代码中加入JavaScript代码</title>
</head>
<body>
<form>
<input type="button" onclick="alert('happy')" value="直接调用入JavaScript代码"/>
</form>
</body>
</html>
10.2 JavaScript语法
10.2.1语法基础
1.区分大小写
2.变量不区分类型
JavaScript中变量声明，采用其弱类型
3.每行代码结尾可以省略分号
在JavaScript里面每条语句结尾的分号“；”不是必要的，如果多个语句写在一行上，那么语句之间的分号“；”才是必需的，最后一条语句的分号“；”可以省略。为了养成良好的编程习惯，建议还是在每条语句后面加上分号。
4.注释与C,C++,java等语言相同
目的是为了让别人和自己容易读懂程序。JavaScript的注释形式与C、C++、Java等语言相同。
// 单行注释
/*
多行注释
*/
10.2.2 标识符和常用变量
1.标识符
(1)必须使用英文字母或者下划线开头。
(2)必须使用英文字母、数字、下划线组成，不能出现空格或制表符。
(3)不能使用JavaScript关键字与JavaScript保留字。
(4)不能使用JavaScript语言内部的单词，比如Infinity，NaN、undefined等。
(5)大小写敏感，如name和Name是不同的两个标识符。
合法的标识符：Hello、_ 12th、sum、Dog23等。
不合法的标识符：if、3com、case、switch等。
2.变量声明
关键字var可应用于JavaScript中任何类型的变量声明。JavaScript是采用的隐式变量声明，但要注意在JavaScript语言的任何位置进行隐式变量声明会将变量声明为全局变量，而函数内的局部变量则必须使用var来声明变量，因此，在声明变量时，需要根据变量的作用范围来声明变量。
3.变量类型
JavaSeript有6种数据类型，主要的类型有Number数值型、String字符型、Object对象型以及Boolean布尔型，其他两种类型为Null和Undefined。
(1)Boolean 布尔型。Boolean 值有 true和false，这是两个特殊值，可以将他们转换为其他类型的数据，例如可将值为true的布尔型数据转换为整数1，而将值为false的布尔型数据转换为整数0。但不能用true表示1或false表示0。
(2) Undefined 数据类型。JavaScript会对未赋值变量赋值为 undefined。
(3)Null数据类型。这是一个对象，但是为空。因为是对象，所以typeof null返回“Object”，注意null是Javascript保留关键字。
(4)Object类型。除了上面提到的各种常用类型外，对象类型也是JavaScript中的重要组成部分。
10.2.3运算符及表达式
JavaScript运算符主要有：算术运算符、关系运算符、逻辑运算符、赋值运算符、条件运算符、逗号运算符等。根据操作数的个数，可以将运算符分为一元运算符、二元运算符和三元运算符。
由操作数（变量、常量、函数调用等）和运算符结合在一起构成的式子称为“表达式”，最简单的表达式可以是常量名称。
1.算术运算符和表达式
算术运算符负责算术运算，用算术运算符和运算对象（操作数）连接起来符合规则的式子，称为算术表达式。
2.关系运算符和表达式
关系运算符用于比较运算符两端的表达式的值，确定二者的关系，根据运算结果返回一个布尔值。用关系运算符和操作数连接起来符合规则的式子，称为关系表达式。
3.逻辑运算符和表达式
逻辑运算符用来执行逻辑运算，其操作数都应该是布尔型数值和表达式或者是可以转为布尔型的数值和表达式，其运算结果返回tue或false。用逻辑运算符和操作数连接起来符合规则的式子，称为逻辑表达式。
4.赋值运算符和表达式
赋值运算符是JavaScript中使用频率最高的运算符之一。赋值运算符要求其左操作数是一个变量、数组元素或对象属性，右操作数是一个任意类型的值，可以为常量、变量、数组元素或对象属性。赋值运算符的作用就是将右操作数的值赋给左操作数。用赋值运算符和操作数连接起来符合规则的式子，称为赋值表达式。JavaScript中常用赋值运算符见表10-4。
5.条件运算符和表达式
条件运算符是一个三元运算符，条件表达式由条件运算符和三个操作数构成。语法：
变量=表达式1?表达式2：表达式3
6.逗号运算符和表达式
逗号运算符是一个二元运算符，逗号运算符的优先级最低，由逗号运算符和操作数连接起来符合规则的式子，称为逗号表达式，其运算规则是先计算第一个表达式的值，再计算第二个表达式的值，依次类推，计算完所有表达式的值，运算结果为最后一个表达式的值。
10.2.4程序设计
1.条件分支语句
（1）if....else语句和一些变形语句
if(条件){
/* 条件为真执行的语句*/
}
else{
/* 条件为假执行的语句 */
}
（2）switch分支语句，和case搭配一起用
switch（表达式）
{
case casel:执行语句 1:break;
case case2:执行语句 2;break;
case case3：执行语句3；break:
default：默认执行语句；
}
2.循环语句
（1）for语句
for（变量=开始值：变量<=结束值：变量=变量+步进值）
{
/*循环体语句 */
}
（2）for..in 语句
for(变量in对象或数组)
{
/*循环体语句*/
}
（3）while语句
while(条件){
/*循环体语句*/
}
（4）do...while 语句
do {
/*循环体语句*/
}while（条件）；
（5）break语句
var i=0；
for(i=0；i<=5；i++){
if(i==3){
break; /* 终止for 循环 */
}
document. write("The number is"+i +"<br/>");
}
输出结果为：
The number is 0
The number is 1
The number is 2
（6）continue语句
var i=0；
for(i=0；i<=5；i++){
if(i==3)continue; /跳过i=3的这次循环*/
document.write("The number is"+ i +"<br/>);
}
输出结果为
The number is O
The number is 1
The number is 2
The number is 4
The number is 5
10.2.5 函数
1.定义函数
function 函数名(varl, var2, var3){
/*函数代码*/
}
varl、var2、var3等指的是传入函数的变量或值，为函数的参数；大括号定义了函数的开始和结束。
2.函数返回值
需要返回某个值的函数必须使用return语句。例如：
function sum(a, b)
{
x=a+b;
return x;
}
JavaScript中的函数无须对函数的返回值进行申明，直接使用return，返回值的类型可以是本节提到的6种类型中的任意一种。
3.函数调用
<!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.3JavaScript对象
10.3.1对象基础
1.概述
JavaScript编程是使用“面向对象”的概念，也称为“对象化编程”。
在JavaScript里面创建一个新的空对象，例如：
var o= new object();
JavaScript的对象可分为本地对象或内置对象、Browser对象和HTML DOM对象。
（1）本地对象
本地对象就是ECNA-262标准内定义的类
（2）Browser对象
Browser Objects也可被称作BOM，是用来与浏览器窗体网页产生互动的对象。
（3）HTML DOM对象
HTML DOM定义了用于HTML的一系列标准对象，以及访问和 resize处理HTML文档的标准方法。其中，最重要的一个对象就是document对象，document代表 参数为负整个HTML文档，用来访问页面中的所有元素。
2.属性
属性是对象的特性值的表述，例如：
<script type="text/javascript"> html>
var str = Hello World!´; (head>
document. writeln(str. length)； <meta char
</script>
3.方法
方法指对象可以执行的行为（或可以完成的功能），与属性相同，JavaScript内建对象本身就自带了很多功能强大的方法，可以直接调用来完成某些特定的功能。
10.3.2常用对象
1.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>10.7</title>
<script type="text/javascript">
function moveWin(){
MyWindow.moveTo(50,50);
}
</script>
</head>
<body>
<script type="text/javascript">
MyWindow=window.open(",",width=20,height=20)
MyWindow.document.write("This is my Window");
</script>
<input type="button" value="Move my Window" onclick="moveWin"/>
</body>
</html>
（2）打开窗口。用open()打开新窗口。
语法：
window. open(url, name, features, replace);
说明：
url：要载入窗体的URL。
name：新建窗体的名称。
features：代表窗体特性的字符串，字符串中每个特性使用逗号分隔。
replace：一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用指定。
（3）关闭窗口。用close()关闭窗口。
语法：
window.close();
例如，关闭一个新建的窗口：
var NewWin= window. open(……);
New Win. close()；
（4）系统对话框。window对象有三种常用的对话框：
alert()：显示提示信息，不能对脚本产生任何改变。常见于提醒用户信息不完整、有误等情况。
confirm()：弹出消息对话框(对话框中包含一个OK按钮与一个Cancel按钮)，一般用于确认信息，返回true或fale，所以主要用于if…else…判断。常见于用户对信息更改前的确认。
prompt()：一个带输入框的对话框，可以返回用户填入的字符串，常见于某些留言板或论坛输入内容那里的插入UBB格式图片。
alert()方法前面示例讲解过，这里再举例说明confirm()方法和prompt()方法的使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>confirm()的使用</title>
</head>
<body>
<script type="text/javascript">
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">
var hobby=prompt("'请问您的爱好?','请输入'");
document.write("您的爱好是---"+hobby);
</script>
</body>
</html>
（5）history历史对象
window对象中的history历史对象包含了用户已浏览的URL的信息，是指浏览器的浏览历史。鉴于安全性的需要，该对象有很多限制。history历史对象有length 这个属性来列出历史的项数。JavaScript所能管到的历史被限制在用测览器的“前进”“后退”键链接到的范围。
history历史对象有以下方法：
back()：后退，与按下“后退”键是等效的。
forward()：前进，与按下“前进”键是等效的。
go()：用法为history.go(x)；在历史的范围内指向指定的URL访问地址。如果x<0.则后退x个地址：如果x>0，则前进x个地址；如果x=0，则刷新现在打开的网页。
2.document对象
用法为document或<窗口对象>.document，其中document表示当前窗口的文档，<窗口对象>.document表示指定窗口的文档。
（1）document对象属性
<!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>
（2）document对象方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dodument方法</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>
3.location对象
location的中文意思是“位置”。location既是window对象的属性又是document对象的属性，即“window. location== document. location:”。
（1）location对象属性
location对象包含8个属性，最重要的一个是href属性，代表当前窗体的URL，其余7个都是当前窗体的URL的一部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location对象属性</title>
<script type="text/javascript">
function currLocation(){ alert(window.location)}
function newLocation(){window.location="十点11.html"}
</script>
</head>
<body>
<input type="button" onclick="currLocation()" value="显示当前的URL"/>
<input type="button" onclick="newLocation()" value="改变URL"/>
</body>
</html>
（2）location对象方法
4.navigator对象
navigator对象的中文意思为“导航器”，通常用于检测浏览器与操作系统的版本，也是window对象的属性。
（1）navigator对象属性
navigator中最重要的是 userAgent属性，它用来返回包含浏览器版本等信息的字符串：其次cookieEnabled也很重要，使用它可以判断用户浏览器是否开启cookie。
（2）navigator对象方法
5.screen对象
screen对象用于获取用户的屏幕信息，是window对象的属性。
每个window对象的screen属性都引用一个screen对象。可以通过screen对象获取一些用户屏幕的信息，如宽度、高度、像素等，而这些信息对于设置图片和页面在浏览器中显示的大小都是非常有用的。screen对象的属性应用和浏览器的关系比较密切，所以在应用这些属性时，一定要注意浏览器之间的兼容性。
（1）screen对象属性
10.4JavaScript事件
10.4.1事件及事件处理
指定事件处理程序有三种方法：
(1)直接在HTML标记中指定。这种方法用得最多。
一般形式：
<标记··事件=”事件处理程序”[事件=”事件处理程序”…]>
例如：
<html>
<head>
<meta charset="utf-8”/>
<title></title>
</head>
<body οnlοad="alert(“欢迎访问页面!)">
</body>
</html>
以上示例<body>标记中，在文档加载完毕时弹出一个告警框，显示“欢迎访问页面”，
(2)编写特定对象特定事件的JavaScript。这种方法用得少，但是在某些场合还是很好用的。
一般形式：
<script language="JavaScript" for=“对象”event="事件">
（事件处理程序代码）
<script>
例如：
<html>
<head>
<meta charset="utf-8” />
<title></title>
<script language="JavaScript" for="window" event=" onload" >
alert(‘欢迎访问页面!)
</script>
</head>
<body>
</body>
</html>
(3)在JavaScript中说明。
一般形式：
<事件主角-对象>.<事件>=<事件处理程序>；
该方法需要注意的是，“事件处理程序”是真正的代码，而不是字符串形式的代码。如果事件处理程序是一个自定义函数，如无使用参数的需要，就不要加“()”。
<html>
<head>
<script type="text/javascript">
window. onerror = ignoreError;
function ignoreError()
return true;
</script>
</head>
<body>
</body>
</html>
这个例子将 ignoreError()函数定义为window对象的onerror事件的处理程序。它的功能是忽略该window对象下任何错误。
10.4.2常用事件
JavaScript中常用事件主要包括一般页面事件、鼠标事件、键盘事件等。
10.4.3事件应用举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
</head>
<body onclick="checkCookies()">
<script type="text/javascript">
function checkCookies(){
if(navigator.cookieEnabled==true)
alert("已启用Cookies")
else
alert("未启用Cookies")
}
</script>
<p>提示框会告诉你，浏览器是否已启用Cookies</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onchange事件</title>
<script type="text/javascript">
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
请输入英文字符：<input type="text" id="fname" onchange="myFunction()"/>
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onchange事件</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="blue";
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.ctrlKey){
alert("你按下了Ctrl键");
}
}
function keyPress(obj){
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: 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=-300+'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="";
}
}
// 数组从0开始,index需要减1
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="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"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>
原文地址：https://blog.csdn.net/2301_80634189/article/details/143871407
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！