JavaScript图片切换特效.docxVIP

教 案 首 页 授课题目授课时间 第 4 讲 JavaScript 图片切换特效 授课形式 讲授 授课学时 4 节 教学目的与要求 学会 Javascript 语言 if… else 流程控制语句； 了解 JavaScript 语言 For 循环流程的控制方法； 熟悉 Javascript 语言时间定时器函数的应用； 学会使用 JS 控制 DIV 背景图片的轮换动作； 教学重点 Javascript 语言 For 循环流程控制语句 教学难点 JavaScript 语言时间定时器函数的应用 教学方法 理论+教授+实践 教学内 容及过 程 设 计 （含时 间分配） if… else 语句（如果，否则）； （10 分） JavaScript For 循 环； （20 分） setInterval()定时器函数讲解； （10 分） JS 控制 DIV 背景图片轮播实例； （30 分） 课堂小结； （10 分） 作业题 和思考题的布置参考资料或相关网站 教学后记 见教案学生练习部分。 主要教学 媒 体  电子课件 第 4 讲 JavaScript 图片切换特效 一、if else 语句（如果，否则） （ （1）if else 结构 其实“if else”的意思和字面意思是一样的，就是“如果”、“否则”。还是让我们来看一个使用if 的例子吧。 script type=text/JavaScript Var hobby = “VbScript”; if (hobby == “JavaScript”) { document.write(有发展); } /script 我们来解释一下这段代码。首先是一个“if”，它后面紧跟着一个括号，括号里则是一个条件，确切地说是一个布尔值。当条件成立的时候，这个值是true，“{}”里的语句将会得到执行；否则这个值是flase，“{}”里的语句将被忽略。 （2）if else 嵌套 如果想做更多的判断，可以用if 的嵌套,看下面的代码。 script type=text/JavaScript var hobby = JavaScript if ( hobby == JavaScript) { document.write(有发展); }else if ( hobby == football)//如果爱好是足球。 //注意：这个if 是嵌套在上一个if else 中的else 中的 {document.write(我 X);}else//既不是JavaScript 又不是足球 {document.write(没有评价??);} /script 第二个if 只有在第一个if 的条件不成立的时候才有机会执行。 二、JavaScript For 循环 所谓循环，就是重复执行一段代码。 前面我们已经看到了，if else 和switch 是 JavaScript 具有了判断的能力，但是电脑的判断能力和人比起来差远了。电脑更擅长一件事情——不停地重复。我们在JavaScript 中把这叫做循环。 for 语句结构如下： for(初始条件;判断条件;循环后动作){ 循环代码 } 让我们来看一个简单的例子吧：有十个菜鸟报数，“菜鸟 1 号、菜鸟 2 号”。有了 for 循环，很少的代码就可以实现十个菜鸟的报数。 script type=text/JavaScript var i=1; for (i=1;i=10;i++){ document.write(菜鸟+i+号br /); } /script 在上面那个例子中，循环恰好执行了10 次，那么和“for (i=1;i=10;i++)”一句中的 10 是不是 10 次的意思呢？下面我们就来看看for 循环的工作机制。 首先i=1叫做初始条件，也就是说从哪里开始，特别的，我们的例子从i=1 开始。 出现在第一个分号后面的i=10表示判断条件，每次循环都会先判断这个条件是否满足， 如果满足则继续循环，否则停止循环，继续执行for 循环后面的代码。你可能想问了，我们设定了i=0，岂不是永远都小于等于 10 吗？来看第三个部分。 最后的i++表示让i 在自身的基础上加 1，这时每次循环后的动作.也就是说，每次循环结束， i 都会比原来大 1，执行若干次循环之后，i=10 的条件就不满足了，这时循环结束。for 循环后面的代码将得到执行。 三、setInterval()定时器函数 用法： setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方