图片循环滚动代码,图片连续滚动

http://www.itjxue.com  2023-01-17 07:08  来源:未知  点击次数: 

求一ASP网页图片循环滚动代码?

div id="c_9"

marquee direction="left" TrueSpeed scrollamount="1" scrolldelay="30" onMouseOver="this.stop();" onMouseOut="this.start();"

img src="images/p_0/p_1.jpg" width="150" height="130" border="1" /

img src="images/p_0/p_2.jpg" width="150" height="130" border="1" /

img src="images/p_0/p_3.jpg" width="150" height="130" border="1" /

/marquee

/div

附:循环滚动基本语法

marquee ... /marquee

移动属性的设置 ,这种移动不仅仅局限于文字,也可以应用于图片,表格等等

方向

direction=# #=left, right ,up ,down marquee direction=left从右向左移!/marquee

方式

bihavior=# #=scroll, slide, alternate marquee behavior=scroll一圈一圈绕着走!/marquee

marquee behavior=slide只走一次就歇了!/marquee

marquee behavior=alternate来回走/marquee

循环

loop=# #=次数;若未指定则循环不止(infinite) marquee loop=3 width=50% behavior=scroll只走 3 趟/marquee P

marquee loop=3 width=50% behavior=slide只走 3 趟/marquee

marquee loop=3 width=50% behavior=alternate只走 3 趟!/marquee

速度

scrollamount=# marquee scrollamount=20啦啦啦,我走得好快哟!/marquee

延时

scrolldelay=# marquee scrolldelay=500 scrollamount=100啦啦啦,我走一步,停一停!/marquee

外观(Layout)设置

对齐方式(Align)

align=# #=top, middle, bottom font size=6

marquee align=# width=400啦啦啦,我会移动耶!/marquee

/font

底色

bgcolor=# #=rrggbb 16 进制数码,或者是下列预定义色彩:

Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,

Fuchsia, White, Green, Purple, Silver, Yellow, Aqua marquee bgcolor=aaaaee颜色!/marquee

面积

height=# width=# marquee height=40 width=50% bgcolor=aaeeaa面积!/marquee

空白

(Margins)hspace=# vspace=#

marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle面积!/marquee

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

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=1;i8;i++){%

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

图片不间断循环滚动代码(向左,向右,向上,向下)

//向左滚动script

var

speed=30

//滚动速度demo2.innerHTML=demo1.innerHTML

//滚动区域function

Marquee(){

//实现滚动的方法if(demo2.offsetWidth-demo.scrollLeft=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

//向左}

}

var

MyMar=setInterval(Marquee,speed)

demo.onmouseover=function()

{clearInterval(MyMar)}

demo.onmouseout=function()

{MyMar=setInterval(Marquee,speed)}

/script//向右滚动,其实代码差不多,就一个地方不一样script

var

speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollLeft=demo.scrollWidth

function

Marquee(){

if(demo.scrollLeft=0)

demo.scrollLeft+=demo2.offsetWidth

else{

demo.scrollLeft--

//向右}

}

var

MyMar=setInterval(Marquee,speed)

demo.onmouseover=function()

{clearInterval(MyMar)}

demo.onmouseout=function()

{MyMar=setInterval(Marquee,speed)}

/script

下面2个就是

上下的了script

var

speed=50

demo2.innerHTML=demo1.innerHTML

function

Marquee(){

if(demo2.offsetTop-demo.scrollTop=0)

demo.scrollTop-=demo1.offsetHeight

else{

demo.scrollTop++

}

}

var

MyMar=setInterval(Marquee,speed)

demo.onmouseover=function()

{clearInterval(MyMar)}

demo.onmouseout=function()

{MyMar=setInterval(Marquee,speed)}

/script

script

var

speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollTop=demo.scrollHeight

function

Marquee(){

if(demo1.offsetTop-demo.scrollTop=0)

demo.scrollTop+=demo2.offsetHeight

else{

demo.scrollTop--

}

}

var

MyMar=setInterval(Marquee,speed)

demo.onmouseover=function()

{clearInterval(MyMar)}

demo.onmouseout=function()

{MyMar=setInterval(Marquee,speed)}

/script

在图片上加连接

图片

(责任编辑:IT教学网)

更多

推荐浏览下载文章