Javascript（十三）javascript BOM详解

今天药忘吃喽~ 2022-05-17 07:19 153阅读 0赞

# 一、BOM定义 #

*  ECMAScript无疑是JavaScript的核心，但是要想在浏览器中使用JavaScript，那么BOM(浏览器对象模型) 才是真正的核心。
 *  BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。
 *  BOM将浏览器中的各个部分转换成了一个一个的对象， 我们通过修改这些对象的属性，调用他们的方法，从而控制浏览器的各种行为。

# 二、wondow对象 #

• window对象是BOM的核心，它表示一个浏览器的实例。

• 在浏览器中我们可以通过window对象来访问操作浏览器，同时window也是作为全局对象存在的。

• 全局作用域:

– window对象是浏览器中的全局对象，因此所有在全局作用域中声明的变量、对象、函数都会变成window对象的属性和方法。

## 2.1、窗口大小 ##

• 浏览器中提供了四个属性用来确定窗口的 大小:

– 网页窗口的大小• innerWidth  
• innerHeight

– 浏览器本身的尺寸• outerWidth  
• outerHeight

## 2.2、打开窗口 ##

• 使用 window.open() 方法既可以导航到一个 特定的 URL，也可以打开一个新的浏览器窗口。

• 这个方法需要四个参数:

– 需要加载的url地址

– 窗口的目标  
– 一个特性的字符串  
– 是否创建新的历史记录

# 三、时间调用 #

## 3.1、超时调用 ##

• 超时调用:  
– setTimeout()

– 超过一定时间以后执行指定函数

– 需要连个参数:

• 要执行的内容  
• 超过的时间

• 取消超时调用  
– clearTimeout()

• 超时调用都是在全局作用域中执行的。

## 3.2、间歇调用 ##

• 间歇调用:  
– setInterval()  
– 每隔一段时间执行指定代码

– 需要两个参数:

• 要执行的代码  
• 间隔的时间

• 取消间隔调用:

– clearInterval()

# 四、系统对话框 #

• 浏览器通过 alert() 、 confirm() 和 prompt()方法可以调用系统对话框向用户显示消息。

• 它们的外观由操作系统及(或)浏览器设置决定，而不是由 CSS 决定。

• 显示系统对话框时会导致程序终止，当关闭对话框程序会恢复执行。

## 4.1、alert ##

• alert()接收一个字符串并显示给用户。调用alert()方法会向用户显示一个包含一个确认按钮的对话框。

• 例如:  
– alert("Hello World");

## 4.2、confirm ##

• confirm和alert类似，只不过confirm弹出的对话框有一个确认和取消按钮。用户可以通过按钮来 确认是否执行操作。

• 例如:  
– confirm('你确定吗?');

• 这个函数的执行会返回一个布尔值，如果选择确定则返回true，如果点击取消则返回false。

### 4.3、prompt ###

• prompt会弹出一个带输入框的提示框，并可以将用户输入的内容返回。

• 它需要两个值作为参数:

– 显示的提示文字  
– 文本框中的默认值

• 例子:  
– prompt('你的年龄是?','18');

# 五、BOM常用对象 #

## 5.1、location对象 ##

*  location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
 *  href属性:  
    – href属性可以获取或修改当前页面的完整的URL地址，使浏览器跳转到指定页面。
 *  assign() 方法  
    – 所用和href一样，使浏览器跳转页面，新地址错误参数传递到assign ()方法中。
 *  replace()方法  
    – 功能一样，只不过使用replace方法跳转地址不会体现到历史记录中。
 *  reload() 方法  
    – 用于强制刷新当前页面

## 5.2、navigator对象 ##

*  navigator 对象包含了浏览器的版本、浏览 器所支持的插件、浏览器所使用的语言等各种与浏览器相关的信息。
 *  我们有时会使用navigator的userAgent属性来检查用户浏览器的版本。

### 5.3、screen对象 ###

• screen 对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。

• 该对象作用不大，我们一般不太使用。

## 5.4、history对象 ##

*  history 对象保存着用户上网的历史记录， 从窗口被打开的那一刻算起。
 *  go()  
    – 使用 go() 方法可以在用户的历史记录中任意跳转，可以向后也可以向前。
 *  back()
    
    – 向后跳转
 *  forward()
    
    – 向前跳转

## 5.5、document对象 ##

*  document对象也是window的一个属性， 这个对象代表的是整个网页的文档对象。
 *  我们对网页的大部分操作都需要以document对象作为起点。
 *  关于document对象的内容，我们后边还要 具体讲解。

# 六、简单例子 #

## 6.1、简单图片轮播 ##

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp;&nbsp; &nbsp;&lt;head&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;meta charset="UTF-8"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;title&gt;&lt;/title&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;style type="text/css"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;*{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;margin: 0; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;padding: 0; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 设置outer的样式 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; */ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;#outer{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置宽和高*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: 520px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;height: 333px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*居中*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;margin: 50px auto; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置背景颜色*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background-color: greenyellow; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置padding*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;padding: 10px 0; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*开启相对定位*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;position: relative; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*裁剪溢出的内容*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;overflow: hidden; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置imgList*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;#imgList{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*去除项目符号*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;list-style: none; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置ul的宽度*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*width: 2600px;*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*开启绝对定位*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;position: absolute; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置偏移量*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 每向左移动520px，就会显示到下一张图片 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; */ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;left: 0px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置图片中的li*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;#imgList li{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置浮动*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;float: left; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置左右外边距*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;margin: 0 10px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置导航按钮*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;#navDiv{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*开启绝对定位*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;position: absolute; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置位置*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;bottom: 15px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置left值 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;outer宽度 &nbsp;520 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;navDiv宽度 25*5 = 125 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;520 - 125 = 395/2 = 197.5 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * */ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*left: 197px;*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;#navDiv a{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置超链接浮动*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;float: left; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置超链接的宽和高*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: 15px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;height: 15px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置背景颜色*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background-color: red; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置左右外边距*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;margin: 0 5px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置透明*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;opacity: 0.5; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*兼容IE8透明*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;filter: alpha(opacity=50); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置鼠标移入的效果*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;#navDiv a:hover{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background-color: black; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/style&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;!--引用工具--&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;script type="text/javascript" src="js/tools.js"&gt;&lt;/script&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;script type="text/javascript"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//给每个图片设置点击事件 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;function imgHref(obj){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;obj.onclick = function(){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//可以根据点击不同的图片做不同的事件处理 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;alert(obj.name);&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;window.onload = function(){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//获取imgList &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var imgList = document.getElementById("imgList"); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//获取页面中所有的img标签 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var imgArr = document.getElementsByTagName("img"); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;for (var i = 0; i &lt; imgArr.length - 1; i++) { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;imgHref(imgArr[i]); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//设置imgList的宽度 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;imgList.style.width = 520*imgArr.length+"px"; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*设置导航按钮居中*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//获取navDiv &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var navDiv = document.getElementById("navDiv"); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//获取outer &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var outer = document.getElementById("outer"); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//设置navDiv的left值 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px"; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//默认显示图片的索引 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var index = 0; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//获取所有的a &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var allA = document.getElementsByTagName("a"); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//设置默认选中的效果 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;allA[index].style.backgroundColor = "black"; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;点击超链接切换到指定的图片 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;点击第一个超链接，显示第一个图片 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;点击第二个超链接，显示第二个图片 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * */ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//为所有的超链接都绑定单击响应函数 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;for(var i=0; i&lt;allA.length ; i++){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//为每一个超链接都添加一个num属性 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;allA[i].num = i; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//为超链接绑定单击响应函数 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;allA[i].onclick = function(){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//关闭自动切换的定时器 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;clearInterval(timer); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//获取点击超链接的索引,并将其设置为index &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;index = this.num; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//切换图片 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 第一张 &nbsp;0 0 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 第二张 &nbsp;1 -520 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 第三张 &nbsp;2 -1040 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; */ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//imgList.style.left = -520*index + "px"; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//设置选中的a &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;setA(); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//使用move函数来切换图片 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;move(imgList , "left" , -520*index , 20 , function(){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//动画执行完毕，开启自动切换 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;autoChange(); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//开启自动切换图片 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;autoChange(); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//创建一个方法用来设置选中的a &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;function setA(){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//判断当前索引是否是最后一张图片 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if(index &gt;= imgArr.length - 1){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//则将index设置为0 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;index = 0; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//此时显示的最后一张图片，而最后一张图片和第一张是一摸一样 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//通过CSS将最后一张切换成第一张 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;imgList.style.left = 0; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//遍历所有a，并将它们的背景颜色设置为红色 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;for(var i=0 ; i&lt;allA.length ; i++){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;allA[i].style.backgroundColor = ""; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//将选中的a设置为黑色 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;allA[index].style.backgroundColor = "black"; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//定义一个自动切换的定时器的标识 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var timer; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//创建一个函数，用来开启自动切换图片 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;function autoChange(){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//开启一个定时器，用来定时去切换图片 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;timer = setInterval(function(){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//使索引自增 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;index++; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//判断index的值 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;index %= imgArr.length; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//执行动画，切换图片 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;move(imgList , "left" , -520*index , 20 , function(){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//修改导航按钮 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;setA(); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;},3000); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/script&gt; &nbsp;&nbsp; &nbsp;&lt;/head&gt; &nbsp;&nbsp; &nbsp;&lt;body&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;!-- 创建一个外部的div，来作为大的容器 --&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="outer"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;!-- 创建一个ul，用于放置图片 --&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;ul id="imgList"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;img src="img/1.jpg" name = "img1"/&gt;&lt;/li&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;img src="img/2.jpg" name = "img2"/&gt;&lt;/li&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;img src="img/3.jpg" name = "img3"/&gt;&lt;/li&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;img src="img/4.jpg" name = "img4"/&gt;&lt;/li&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;img src="img/5.jpg" name = "img5"/&gt;&lt;/li&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;img src="img/1.jpg" name = "img1"/&gt;&lt;/li&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/ul&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;!--创建导航按钮--&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="navDiv"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;a href="javascript:;"&gt;&lt;/a&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;a href="javascript:;"&gt;&lt;/a&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;a href="javascript:;"&gt;&lt;/a&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;a href="javascript:;"&gt;&lt;/a&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;a href="javascript:;"&gt;&lt;/a&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt; &nbsp;&nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</td> 
 </tr> 
 </tbody> 
</table>

工具类：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>//尝试创建一个可以执行简单动画的函数 /* &nbsp;* 参数： &nbsp;* &nbsp;&nbsp; &nbsp;obj:要执行动画的对象 &nbsp;* &nbsp;&nbsp; &nbsp;attr:要执行动画的样式，比如：left top width height &nbsp;* &nbsp;&nbsp; &nbsp;target:执行动画的目标位置 &nbsp;* &nbsp;&nbsp; &nbsp;speed:移动的速度(正数向右移动，负数向左移动) &nbsp;* &nbsp;callback:回调函数，这个函数将会在动画执行完毕以后执行 &nbsp;*/ function move(obj, attr, target, speed, callback) { &nbsp;&nbsp; &nbsp;//关闭上一个定时器 &nbsp;&nbsp; &nbsp;clearInterval(obj.timer); &nbsp;&nbsp; &nbsp;//获取元素目前的位置 &nbsp;&nbsp; &nbsp;var current = parseInt(getStyle(obj, attr)); &nbsp;&nbsp; &nbsp;//判断速度的正负值 &nbsp;&nbsp; &nbsp;//如果从0 向 800移动，则speed为正 &nbsp;&nbsp; &nbsp;//如果从800向0移动，则speed为负 &nbsp;&nbsp; &nbsp;if(current &gt; target) { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//此时速度应为负值 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;speed = -speed; &nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;//开启一个定时器，用来执行动画效果 &nbsp;&nbsp; &nbsp;//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识 &nbsp;&nbsp; &nbsp;obj.timer = setInterval(function() { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//获取box1的原来的left值 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var oldValue = parseInt(getStyle(obj, attr)); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//在旧值的基础上增加 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var newValue = oldValue + speed; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//判断newValue是否大于800 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//从800 向 0移动 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//向左移动时，需要判断newValue是否小于target &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//向右移动时，需要判断newValue是否大于target &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if((speed &lt; 0 &amp;&amp; newValue &lt; target) || (speed &gt; 0 &amp;&amp; newValue &gt; target)) { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;newValue = target; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//将新值设置给box1 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;obj.style[attr] = newValue + "px"; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//当元素移动到0px时，使其停止执行动画 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if(newValue == target) { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//达到目标，关闭定时器 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;clearInterval(obj.timer); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//动画执行完毕，调用回调函数 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;callback &amp;&amp; callback(); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;}, 30); } /* &nbsp;* 定义一个函数，用来获取指定元素的当前的样式 &nbsp;* 参数： &nbsp;* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;obj 要获取样式的元素 &nbsp;* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;name 要获取的样式名 &nbsp;*/ function getStyle(obj, name) { &nbsp;&nbsp; &nbsp;if(window.getComputedStyle) { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//正常浏览器的方式，具有getComputedStyle()方法 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;return getComputedStyle(obj, null)[name]; &nbsp;&nbsp; &nbsp;} else { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//IE8的方式，没有getComputedStyle()方法 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;return obj.currentStyle[name]; &nbsp;&nbsp; &nbsp;} } //定义一个函数，用来向一个元素中添加指定的class属性值 /* &nbsp;* 参数: &nbsp;* &nbsp;&nbsp; &nbsp;obj 要添加class属性的元素 &nbsp;* &nbsp;cn 要添加的class值 &nbsp;* &nbsp;&nbsp; &nbsp; &nbsp;*/ function addClass(obj, cn) { &nbsp;&nbsp; &nbsp;//检查obj中是否含有cn &nbsp;&nbsp; &nbsp;if(!hasClass(obj, cn)) { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;obj.className += " " + cn; &nbsp;&nbsp; &nbsp;} } /* &nbsp;* 判断一个元素中是否含有指定的class属性值 &nbsp;* &nbsp;&nbsp; &nbsp;如果有该class，则返回true，没有则返回false &nbsp;* &nbsp;&nbsp; &nbsp; &nbsp;*/ function hasClass(obj, cn) { &nbsp;&nbsp; &nbsp;//判断obj中有没有cn class &nbsp;&nbsp; &nbsp;//创建一个正则表达式 &nbsp;&nbsp; &nbsp;//var reg = /\bb2\b/; &nbsp;&nbsp; &nbsp;var reg = new RegExp("\\b" + cn + "\\b"); &nbsp;&nbsp; &nbsp;return reg.test(obj.className); } /* &nbsp;* 删除一个元素中的指定的class属性 &nbsp;*/ function removeClass(obj, cn) { &nbsp;&nbsp; &nbsp;//创建一个正则表达式 &nbsp;&nbsp; &nbsp;var reg = new RegExp("\\b" + cn + "\\b"); &nbsp;&nbsp; &nbsp;//删除class &nbsp;&nbsp; &nbsp;obj.className = obj.className.replace(reg, ""); } /* &nbsp;* toggleClass可以用来切换一个类 &nbsp;* &nbsp;&nbsp; &nbsp;如果元素中具有该类，则删除 &nbsp;* &nbsp;&nbsp; &nbsp;如果元素中没有该类，则添加 &nbsp;*/ function toggleClass(obj, cn) { &nbsp;&nbsp; &nbsp;//判断obj中是否含有cn &nbsp;&nbsp; &nbsp;if(hasClass(obj, cn)) { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//有，则删除 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;removeClass(obj, cn); &nbsp;&nbsp; &nbsp;} else { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//没有，则添加 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;addClass(obj, cn); &nbsp;&nbsp; &nbsp;} }</td> 
 </tr> 
 </tbody> 
</table>

效果：

![70][]

点击红色超链接切换图片，点击不同的图片弹出图片名称，现在设置每隔3秒自动切换。

## 6.2 二级菜单 ##

CSS代码：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>@charset "utf-8"; /* sdmenu */ div.sdmenu { &nbsp;&nbsp; &nbsp;width: 150px; &nbsp;&nbsp; &nbsp;margin: 0 auto; &nbsp;&nbsp; &nbsp;font-family: Arial, sans-serif; &nbsp;&nbsp; &nbsp;font-size: 12px; &nbsp;&nbsp; &nbsp;padding-bottom: 10px; &nbsp;&nbsp; &nbsp;background: url(bottom.gif) no-repeat right bottom; &nbsp;&nbsp; &nbsp;color: #fff; } div.sdmenu div { &nbsp;&nbsp; &nbsp;background: url(title.gif) repeat-x; &nbsp;&nbsp; &nbsp;overflow: hidden; } div.sdmenu div:first-child { &nbsp;&nbsp; &nbsp;background: url(toptitle.gif) no-repeat; } div.sdmenu div.collapsed { &nbsp;&nbsp; &nbsp;height: 25px; } div.sdmenu div span { &nbsp;&nbsp; &nbsp;display: block; &nbsp;&nbsp; &nbsp;height: 15px; &nbsp;&nbsp; &nbsp;line-height: 15px; &nbsp;&nbsp; &nbsp;overflow: hidden; &nbsp;&nbsp; &nbsp;padding: 5px 25px; &nbsp;&nbsp; &nbsp;font-weight: bold; &nbsp;&nbsp; &nbsp;color: white; &nbsp;&nbsp; &nbsp;background: url(expanded.gif) no-repeat 10px center; &nbsp;&nbsp; &nbsp;cursor: pointer; &nbsp;&nbsp; &nbsp;border-bottom: 1px solid #ddd; } div.sdmenu div.collapsed span { &nbsp;&nbsp; &nbsp;background-image: url(collapsed.gif); } div.sdmenu div a { &nbsp;&nbsp; &nbsp;padding: 5px 10px; &nbsp;&nbsp; &nbsp;background: #eee; &nbsp;&nbsp; &nbsp;display: block; &nbsp;&nbsp; &nbsp;border-bottom: 1px solid #ddd; &nbsp;&nbsp; &nbsp;color: #066; } div.sdmenu div a.current { &nbsp;&nbsp; &nbsp;background: #ccc; } div.sdmenu div a:hover { &nbsp;&nbsp; &nbsp;background: #066 url(linkarrow.gif) no-repeat right center; &nbsp;&nbsp; &nbsp;color: #fff; &nbsp;&nbsp; &nbsp;text-decoration: none; }</td> 
 </tr> 
 </tbody> 
</table>

图片素材自己加，没有也没关系，效果如下：

![70 1][]

[70]: /images/20220517/8ddd94023b4443b5850df91a5c366b72.png
[70 1]: /images/20220517/793940c37d0c4b4493c1ff17bc13c3ab.png