实训案例名称:实现无间断的图片循环滚动效果
1.任务介绍
编写一段程序实现无间断的图片循环滚动效果。
2.任务目标
学会 Window 对象属性和方法的运用。
3.实现思路
运用 Window 对象的 setInterval 方法定时调用函数实现图片循环滚动。
运用 Window 对象的 clearInterval 方法清除定时调用。
4.实现代码
完整代码如脚本 6-9 所示。
脚本 6-9.html
<html>
<head>
<title>图片循环滚动</title>
</head>
<body>
<div id="demo" style=" overflow: hidden; width: 600px; height: 200px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="text-align:center" id="marquePic1">
<!-- 要循环滚动的图片 -->
<table width="455" border="0" style="text-align:center"
cellpadding="0" cellspacing="0" >
<tr style="text-align:center">
<td><img width="200" height="166" border="1"
src="http://filesimg.111cn.net/2011/05/20111212010310983.png"></td>
<td><img width="200" height="166" border="1"
src="http://filesimg.111cn.net/2011/05/20111212010316870.png"></td>
<td><img width="200" height="166" border="1"
src="http://filesimg.111cn.net/2011/05/20111212010323234.png"></td>
<td><img width="200" height="166" border="1"
src="http://filesimg.111cn.net/2011/05/20111212010329895.png"></td>
<td><img width="200" height="166" border="1"
src="http://filesimg.111cn.net/2011/05/2011121201033672.png"></td>
<td><img width="200" height="166" border="1"
src="http://filesimg.111cn.net/2011/05/20111212010342197.png"></td>