JavaScript图片切换特效.docVIP

教 案 首 页 授课题目 第4讲 JavaScript图片切换特效 授课形式 讲授 授课时间 授课学时 4 节 教学目的 与要求 （1）学会Javascript语言if… else流程控制语句； （2）了解JavaScript语言For循环流程的控制方法； （3）熟悉Javascript语言时间定时器函数的应用； （4）学会使用JS控制DIV背景图片的轮换动作； 教学重点 Javascript语言For循环流程控制语句 教学难点 JavaScript语言时间定时器函数的应用 教学方法 理论+教授+实践 教学内容及过程设计（含时间分配） （1）if… else语句（如果，否则）； （10分） （2）JavaScript For 循环； （20分） （3）setInterval()定时器函数讲解； （10分） （4）JS控制DIV背景图片轮播实例； （30分） （5）课堂小结； （10分） 作业题和思考题的布置 见教案学生练习部分。 参考资料或 相关网站 主要教学 媒 体 电子课件 教学后记 第4讲 JavaScript图片切换特效 一、if else语句（如果，否则）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()定时器函数 （1）用法： setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval()