JS上下文字滚动,怎么改成无限循环的,还有就是滚动速度怎么改?

JavaScript018

JS上下文字滚动,怎么改成无限循环的,还有就是滚动速度怎么改?,第1张

// 数字2000可以控制滚动的间隔,2000为2秒,3000为3秒

window.setTimeout( "run()", 2000 )

// 数字50可以控制速度,该数字越大速度越慢

window.setTimeout( "run()", 50 )

// 已经实现无限循环滚动

oMarquee.innerHTML += oMarquee.innerHTML

1.概述

循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片。

2.技术要点

主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下:

setTimeout(function,milliseconds,[arguments])

参数说明:

a.

function:要调用的JavaScript自定义函数名称。

b.

Milliseconds:设置超时时间(以毫秒为单位)。

功能:经过超时时间后,调用函数。此值可以用clearTimeout()函数清除。

3.具体实现

(1)在页面的合适位置添加一个id属性为demo的<div>标记,并在该标记中添加表格及要要滚动显示的图片。关键代码如下:

<div

id="demo"

style="

overflow:

hidden

width:

455px

height:

166px">

<table

border="0"

cellspacing="0"

cellpadding="0">

<tr>

<td

valign="top"

id="marquePic1">

<!--

要循环滚动的图片

-->

<table

width="455"

border="0"

align="center"

cellpadding="0"

cellspacing="0"

>

<tr

align="center">

<%for(int

i=1i<8i++){%>

<td>

<img

src="Images/<%=i%>.jpg"

width="118"

height="166"

border="1">

</td>

<%}%>

</tr>

</table>

</td>

<td

id="marquePic2"

width="1"></td>

</tr>

</table>

</div>

(2)编写自定义的JavaScript函数move(),用于实现无间断的图片循环滚动效果。speed数值越大图片滚动的越快,具体代码如下:

<script

language="javascript">

var

speed=30

//设置间隔时间

marquePic2.innerHTML=marquePic1.innerHTML

var

demo=document.getElementById("demo")

//获取demo对象

function

Marquee(n){

//实现图片循环滚动的方法

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

demo.scrollLeft=0

}

else{

demo.scrollLeft=demo.scrollLeft+n

}

}

var

MyMar=setInterval("Marquee(5)",speed)

demo.onmouseover=function()

{

//停止滚动

clearInterval(MyMar)

}

demo.onmouseout=function()

{

//继续滚动

MyMar=setInterval("Marquee(5)",speed)

}

</script>

以上所述是小编给大家介绍的JavaScript代码实现图片循环滚动效果的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!