admin 管理员组文章数量: 887018
2024年2月28日发(作者：成员函数与普通函数的区别)
教 案 首 页
授课题目
授课时间
第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的例子吧。
我们来解释一下这段代码。首先是一个“if”，它后面紧跟着一个括号，括号里则是一个条件，确切地说是一个布尔值。当条件成立的时候，这个值是true，“{}”里的语句将会得到执行；否则这个值是flase，“{}”里的语句将被忽略。
（2）if else嵌套
如果想做更多的判断，可以用if的嵌套,看下面的代码。
第二个if只有在第一个if的条件不成立的时候才有机会执行。
二、JavaScript For 循环
所谓循环，就是重复执行一段代码。
前面我们已经看到了，if else和switch是JavaScript具有了判断的能力，但是电脑的判断能力和人比起来差远了。电脑更擅长一件事情——不停地重复。我们在JavaScript中把这叫做循环。
for语句结构如下：
for(初始条件;判断条件;循环后动作){
循环代码
}
让我们来看一个简单的例子吧：有十个菜鸟报数，“菜鸟1号、菜鸟2号”。有了for循环，很少的代码就可以实现十个菜鸟的报数。
在上面那个例子中，循环恰好执行了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，可以传递给 nterval() 从而取消对 code 的周期性执行。
（4）实例：
四、JS控制DIV背景图片轮播实例
（1）图片播放界面：
（2）DIV背景图片播放界面CSS代码：
（3）图片播放JS功能代码：
五、课堂小结
本次课主要讲述了JavaScript的流程语句应用，网站的发展与美好前景，提起学生的学习兴趣，激发同学们对网站开发的就业爱好以及对人生发展的理性规划。
版权声明：本文标题：JavaScript图片切换特效 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1709086963h538042.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论