JavaScript图片切换特效
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
教案首页
第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()
document.getElementById("clock").value=t
}
</script>
</form>
<div id="clock"></div>
<button onclick="int=window.clearInterval(int)">Stop interval</button>
</body>
</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){
document.getElementById("flash_css").style.backgroundImage="url(images/show -"+i+".jpg)";
for(s=1;s<=5;s++){
document.getElementById("a"+s).style.backgroundColor="";
document.getElementById("a"+s).style.color="";
}
document.getElementById("a"+i).style.backgroundColor="#000";
document.getElementById("a"+i).style.color="#fff";
i++;
if(i>5){i=1;}
clearInterval(T);
T=setInterval("showpic("+i+")",1000);
}
</script>
五、课堂小结
本次课主要讲述了JavaScript的流程语句应用，网站的发展与美好前景，提起学生的学习兴趣，激发同学们对网站开发的就业爱好以及对人生发展的理性规划。