JavaScript图片切换特效.doc

教 案 首 页授课题目第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语句（如果，否则）（1）if else结构其实“if else”的意思和字面意思是一样的，就是“如果”、“否则”。还是让我们来看一个使用if的例子吧。Var hobby = “VbScript”;if (hobby = “JavaScript”) document.write(有发展);我们来解释一下这段代码。首先是一个“if”，它后面紧跟着一个括号，括号里则是一个条件，确切地说是一个布尔值。当条件成立的时候，这个值是true，“”里的语句将会得到执行；否则这个值是flase，“”里的语句将被忽略。（2）if else嵌套如果想做更多的判断，可以用if的嵌套,看下面的代码。var hobby = JavaScriptif ( hobby = JavaScript) document.write(有发展);else if ( hobby = football)/如果爱好是足球。/注意：这个if是嵌套在上一个if else中的else中的document.write(我X);else/既不是JavaScript又不是足球document.write(没有评价);第二个if只有在第一个if的条件不成立的时候才有机会执行。二、JavaScript For 循环所谓循环，就是重复执行一段代码。前面我们已经看到了，if else和switch是JavaScript具有了判断的能力，但是电脑的判断能力和人比起来差远了。电脑更擅长一件事情不停地重复。我们在JavaScript中把这叫做循环。for语句结构如下：for(初始条件;判断条件;循环后动作) 循环代码让我们来看一个简单的例子吧：有十个菜鸟报数，“菜鸟1号、菜鸟2号”。有了for循环，很少的代码就可以实现十个菜鸟的报数。var i=1;for (i=1;i=10;i+)document.write(菜鸟+i+号);在上面那个例子中，循环恰好执行了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() 方法的参数。（2）语法：setInterval(code,millisec,lang)（3）返回值：返回的值setInterval函数的ID标识，每次调用setInterval函数都会产生一个唯一的ID，可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行。（4）实例：var int=self.setInterval(clock(),50)function clock()var t=new Date()document.getElementById(clock).value=tStop interval四、JS控制DIV背景图片轮播实例（1）图片播放界面：（2）DIV背景图片播放界面CSS代码：body font-size:12px;#flash_csswidth:400px;height:300px;adisplay:block; float:left; border:1px solid #06F; padding:6px; padding-left:8px; padding-right:8px; margin-right:6px; margin-top:10px; text-decoration:none;.bottom padding-top:250px; float:right;（3）图片播放JS功能代码：var i=1;var T;function showpic(i)document.getElementById(flash_css).style.backgroundImage=url(images/show-+i+.jpg);for(s=1;s5)i=1;cl