教 案 首 页
授课题目
第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分）
作业题和思考题的布置
见教案学生练习部分。
参考资料或
相关网站
www.baidu
主要教学
媒    体
电子课件
教学后记

第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()定时器函数
（1）用法：
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
（2）语法：
setInterval(code,millisec[,"lang"])
（3）返回值：
返回的值setInterval函数的ID标识，每次调用setInterval函数都会产生一个唯一的ID，可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行。
（4）实例：
<!DOCTYPE html>
<html>
<body>
<form>
<input type="text" id="clock" size="35" />
<script>
var int=self.setInterval("clock()",50)
function clock(){var t=new Date()
ElementById("clock").value=t
}
</script>
</form>
<div id="clock"></div>
<button onclick="int=window.clearInterval(int)">Stop interval</button>
</body>
js实现轮播图最简代码</html>
四、JS控制DIV背景图片轮播实例
（1）图片播放界面：
（2）DIV背景图片播放界面CSS代码：
<style type="text/css">
body{ font-size:12px;}
#flash_css{width:400px;height:300px;}
a{display: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;}
</style>
（3）图片播放JS功能代码：
<script language="javascript">
var i=1;
var T;
function showpic(i){
    ElementById("flash_css").style.backgroundImage="url(images/show-"+i+".jpg)";
    for(s=1;s<=5;s++){
        ElementById("a"+s).style.backgroundColor="";
        ElementById("a"+s).lor="";
    }
    ElementById("a"+i).style.backgroundColor="#000";
    ElementById("a"+i).lor="#fff";
    i++;
    if(i>5){i=1;}
    clearInterval(T);
    T=setInterval("showpic("+i+")",1000);
}
</script>
五、课堂小结
本次课主要讲述了JavaScript的流程语句应用，网站的发展与美好前景，提起学生的学习兴趣，激发同学们对网站开发的就业爱好以及对人生发展的理性规划。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。