JavaScript程序设计基础教程（慕课版）（第2版） 实训指导-6.1 实现无间断的图片循环滚动效果---6.3 iframe创建动态内容.docx

实训案例名称：实现无间断的图片循环滚动效果

1．任务介绍

编写一段程序实现无间断的图片循环滚动效果。

2．任务目标

学会Window对象属性和方法的运用。

3．实现思路

运用Window对象的setInterval方法定时调用函数实现图片循环滚动。

运用Window对象的clearInterval方法清除定时调用。

4．实现代码

完整代码如脚本6-9所示。

脚本6-9.html

html

head

title图片循环滚动/title

/head

body

divid=demostyle=overflow:hidden;width:600px;height:200px;

tableborder=0cellspacing=0cellpadding=0

tr

tdstyle=text-align:centerid=marquePic1

!--要循环滚动的图片--

tablewidth=455border=0style=text-align:center

cellpadding=0cellspacing=0

trstyle=text-align:center

tdimgwidth=200height=166border=1

src=/2011/05/20111212010310983.png/td

tdimgwidth=200height=166border=1

src=/2011/05/20111212010316870.png/td

tdimgwidth=200height=166border=1

src=/2011/05/20111212010323234.png/td

tdimgwidth=200height=166border=1

src=/2011/05/20111212010329895.png/td

tdimgwidth=200height=166border=1

src=/2011/05/2011121201033672.png/td

tdimgwidth=200height=166border=1

src=/2011/05/20111212010342197.png/td

/tr

/table

/td

tdid=marquePic2width=1/td

/tr

/table

/div

scriptlanguage=javascript

varspeed=30;//设置间隔时间

marquePic2.innerHTML=marquePic1.innerHTML;

vardemo=document.getElementById(demo);//获取demo对象

functionMarquee(n){//实现图片循环滚动的方法

if(marquePic1.offsetWidth-demo.scrollLeft=0){

demo.scrollLeft=0;

}else{

demo.scrollLeft=demo.scrollLeft+n;

}

}

varMyMar=setInterval(Marquee(6),speed);

demo.onmouseover=functio