项目八 JavaScript应用实例-“焦点图轮播”特效

网站前端开发项目教程单元一网站前端开发基础01020304目录单元二HTML结构化语言单元三

CSS表现技术单元四JavaScript交互技术05综合实训企业网站设计项目八JavaScript应用实例—新城实验小学首页“焦点图轮播”特效设计单元四JavaScript交互技术任务设计“校园风采”焦点图轮播特效焦点图轮播焦点图是一种网站内容的展现形式,可简单理解为一张图片或多张图片展现在网页上就是网站焦点图。1

学习目标：HTMLBOM设置清除定时器清除定时器项目概述理解焦点图轮播的设计思路掌握HTMLBOM对象掌握setTimeout、clearTimeout方法及应用掌握setInterval、clearInterval方法及应用2

知识要求：设计“校园风采”焦点图轮播特效01任务情境图像1播放的效果图像2播放的效果图像3播放的效果设计“校园风采”焦点图轮播特效01任务分析焦点图轮播的设计分成三步走，第一步设计HTML结构，HTML结构包括“校园风采”标题图片，轮播的三张图像，图像底部用ol设计的三个矩形按钮；第二步设计CSS样式，如按钮的边框和背景等；第三步设计JS特效，用setInterval方法实现自动播放，clearInterval清除自动播放。设计“校园风采”焦点图轮播特效01知识准备一、BOM操作BOM是BrowserObjectModel的缩写，简称浏览器对象模型，它提供了一系列对象用于与浏览器窗口进行交互。BOM对象的层次结构如下图：一、BOM操作设计“校园风采”焦点图轮播特效01知识准备一、BOM操作1.Window对象所有浏览器都支持window对象,它表示浏览器窗口，可以用于获取浏览器窗口的尺寸、坐标，或设置计时器等。其常用的属性和方法如右图：设计“校园风采”焦点图轮播特效01知识准备一、BOM操作Navigator对象navigator对象包含有关访问者浏览器的信息。其常用的属性和方法如右图：设计“校园风采”焦点图轮播特效01知识准备一、BOM操作3.Location对象 location对象用于获取和设置当前网页的URL地址，其常用的属性和方法如右图所示：设计“校园风采”焦点图轮播特效01知识准备一、BOM操作4.Screen对象 screen对象包含有关用户计算机屏幕的信息，其常用的属性和方法如右图所示：设计“校园风采”焦点图轮播特效01知识准备一、BOM操作5.History对象 history对象主要的作用是控制浏览器的前进和后退，其常用的属性和方法如右图所示：设计“校园风采”焦点图轮播特效01知识准备一、BOM操作1.setTimeout()setTimeout()方法用来设置普通定时器，可以实现在指定的时间后调用函数执行指定的代码。语法格式：setTimeout(code,millisec);其中，参数code为要调用的函数或要执行的代码串，参数millisec为指定的时间，通常以毫秒为计。2．clearTimeout（）clearTimeout()方法可取消由setTimeout()方法设置的定时。二、设置或者清除定时器设计“校园风采”焦点图轮播特效01知识准备一、BOM操作语法格式：clearTimeout(id_of_settimeout);其中，参数id_of_settimeout为由setTimeout()返回的ID值。

3.setInterval()setInterval()方法用来设置周期定时器，可以实现按照指定的周期来调用函数或计算表达式。语法格式：setInterval(code,millisec);其中，参数code为要调用的函数或要执行的代码串，参数millisec为周期性执行或调用code之间的时间间隔，以毫秒计。设计“校园风采”焦点图轮播特效01知识准备一、BOM操作4.clearInterval()clearInterval()方法可取消由setInterval()设置的定时。语法格式：clearInterval(id_of_setinterval);其中，参数id_of_setinterval是由setInterval()返回的ID值。

【例9-1】一分钟秒倒计时

要求：单击“开始”按钮倒计时开始，单击“暂停”按钮停止倒计时，当倒计时结束时显示信息“☞倒计时结束”。设计“校园风采”焦点图轮播特效01任务实现一、BOM操作1.结构分析，如右图：2.样式分析3.JS效果分析4.制作HTML页面结构5.设计CSS样式6.编写JavaScript代码，实现焦点图轮播

经验指导浏览器的定时器都不是精确执行的，如果说你的代码执行时间会比较久的话，就会导致setInterval中的一部分函数调用被略过，可以采用setTimeout，然后再setTimeout里递归调用。项目总结通过完成本项目，让学生掌握HTMLBOM对象的使用，会利用setTimeout、clearTimeout、setInterval、clearInterval方法设置和清除定时器，会灵活运用这些方法完成“焦点图轮播”特效等网页应用。

通过完成本项目，让学生掌握HTMLBOM对象的使用，会利用setTimeout、clearTimeout、setInterval、clearInterval方法设置和清除定时器，会灵活运用这些方法完成“焦点图轮播”特效等网页应用。拓展练习一、BOM操作任务要求：请结合给出的素材，在“海南旅游网”首页宣传栏上，完成焦点图轮播特效，效果下图所示。具体要求：1、左侧3张图像轮播大小为493px*211px，外围有1px，实线，颜色为#ddd的边框。训练1：“海南旅游网”首页焦点图轮播设计拓展练习一、BOM操作2、右侧面板模块离左侧图像模块距离为487px。3、右侧标题栏目背景图像为tabs_bg.png，大小为247px*70px，下边距1px。4、右侧文字字体为“黑体”，大小26px，加粗200，下边距4px，文字居中对齐，字母间距0.5em。5、右侧超链接文字颜色为#444444，左间距18px，垂直居中。6、页面