会员
众包
新闻
博问
闪存
赞助商
HarmonyOS
Chat2DB
所有博客
当前博客
我的博客
我的园子
账号设置
会员中心
简洁模式
...
退出登录
注册
登录
学而时习之不亦乐乎?
开心做人,开心做事!
博客园
首页
新随笔
联系
订阅
管理
非常好的图片滚动代码(多幅图片依次向上滚动, 每幅图都会有停留展示时间)
四幅图片依次向上滚动, 每幅图都会有停留展示时间.
<
table width
=
"
100%
"
border
=
"
0
"
cellpadding
=
"
0
"
cellspacing
=
"
0
"
>
<
tr
>
<
td
>
<
SCRIPT language
=
"
JavaScript
"
>
<!--
var
scrla
=
3
var
scrlb
=
1
var
scrlc
=
2
var
scrld
=
4
var
scrlda
=
'scrl_'
+
scrla;
var
scrldb
=
'scrl_'
+
scrlb;
var
scrldc
=
'scrl_'
+
scrlc;
var
scrldd
=
'scrl_'
+
scrld;
var
timea
=
100
var
timeb
=
300
var
tt
=
180
/
timea
//
如果改了图片的高度,此处时间180也需相应改差值
var
ttt
=
timea
+
timeb
var
scrlnum
=
timea
+
50
function
scroll()
{
if
(scrlnum
<=
timea)
{
document.all[scrlda].style.top
=
0
-
scrlnum
*
tt
document.all[scrldb].style.top
=
180
-
scrlnum
*
tt
//
如果改了图片的高度,此处180
也需相应改差值
}
if
((scrlnum
>
timea)
&&
(scrlnum
<
ttt))
{
document.all[scrlda].style.top
=
-
180
//
如果改了图片的高度,此处180也需相应改
差值
document.all[scrldb].style.top
=
0
}
scrlnum
=
scrlnum
+
1
if
(scrlnum
>=
ttt)
{
scrla
=
scrla
+
1
;
if
(scrla
==
5
) scrla
=
1
;
scrlda
=
'scrl_'
+
scrla;
scrlb
=
scrla
+
1
;
if
(scrlb
==
5
) scrlb
=
1
;
scrldb
=
'scrl_'
+
scrlb;
scrlc
=
scrlb
+
1
;
if
(scrlc
==
5
) scrlc
=
1
;
scrldc
=
'scrl_'
+
scrlc;
scrld
=
scrlb
+
1
;
if
(scrld
==
5
) scrld
=
1
;
scrldd
=
'scrl_'
+
scrld;
scrlnum
=
0
;
document.all[scrlda].style.visibility
=
'visible' ;
document.all[scrldb].style.visibility
=
'visible' ;
document.all[scrldd].style.visibility
=
'visible' ;
document.all[scrldc].style.visibility
=
'hidden' ;
document.all[scrldc].style.top
=
180
;
//
如果改了图片的高度,此处180也需相应改
差值
}
setTimeout(
"
scroll()
"
,
20
)
}
//
-->
</
SCRIPT
>
<!--
以下width
=
"
375
"
height
=
"
150
"
为图片固定长宽, 如果更改,则需修改相应数值
-->
<
span style
=
"
WIDTH: 375px; POSITION: relative; HEIGHT: 150px;
"
id
=
"
main2
"
>
<
div style
=
"
LEFT: 0px; WIDTH: 405px; CLIP: rect(0px 375px 150px 0px); POSITION: absolute; TOP: 0px; HEIGHT:
150px
"
id
=
"
scroll_image
"
>
<
table width
=
"
100%
"
border
=
"
0
"
cellpadding
=
"
0
"
cellspacing
=
"
0
"
>
<
tr
>
<
td
>
<
div style
=
"
LEFT: 0px; WIDTH: 375px; POSITION: absolute; TOP: 0px;
"
id
=
"
scrl_1
"
>
<
a href
=
"
#
"
target
=
"
_blank
"
><
img src
=
""
border
=
"
0
"
width
=
"
375
"
height
=
"
150
"
></
a
>
</
div
>
<
div style
=
"
LEFT: 0px; WIDTH: 375px; POSITION: absolute; TOP: 0px;
"
id
=
"
scrl_2
"
>
<
a href
=
"
#
"
target
=
"
_blank
"
><
img src
=
""
border
=
"
0
"
width
=
"
375
"
height
=
"
150
"
></
a
>
</
div
>
<
div style
=
"
LEFT: 0px; WIDTH: 375px; POSITION: absolute; TOP: 0px;
"
id
=
"
scrl_3
"
>
<
a href
=
"
#
"
target
=
"
_blank
"
><
img src
=
""
border
=
"
0
"
width
=
"
375
"
height
=
"
150
"
></
a
>
</
div
>
<
div style
=
"
LEFT: 0px; WIDTH: 375px; POSITION: absolute; TOP: 0px;
"
id
=
"
scrl_4
"
>
<
a href
=
"
#
"
target
=
"
_blank
"
><
img src
=
""
border
=
"
0
"
width
=
"
375
"
height
=
"
150
"
></
a
>
</
div
>
</
td
>
</
tr
>
</
table
>
</
span
>
<
SCRIPT
>
scroll();
</
SCRIPT
>
</
td
>
</
tr
>
</
table
>
posted on
2007-07-22 16:48
阿蓝
阅读(
2753
) 评论(
0
)
收藏
举报
刷新页面
返回顶部