JavaScript代码实现图片循环滚动效果

JavaScript09

JavaScript代码实现图片循环滚动效果,第1张

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代码实现图片循环滚动效果的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

jquery实现立体式数字滚动条增加效果，代码分为两部分，一部分位html结构另一部分属于js代码段，需要的朋友参考下吧！

1、html结构

<div class="numberRun1"></div>

2、js

<script type="text/javascript" src="js/digital_over.js" ></script>//引用 //这是自定义函数（需要在页面中进行调用） <script> //数字滚动function digitalScroll(obj,n){ var numRun = $(obj).numberAnimate({num:n, speed:2000, symbol:","}) var nums = n setInterval(function(){numRun.resetData(nums) },3000) var numWidth= $(obj).width() $(obj).find('.mt-number-animate').css('width',numWidth) $(obj).css('width','100%') $(obj).find('.mt-number-animate').css('margin','0 auto') }window.indexdigitalScroll=function(){ digitalScroll($('.numberRun1'),1160518) } </script> <!--这是在页面中调用的方法--> <script> $(function(){ indexdigitalScroll() }) </script>

3、图片案例