- ·上一篇文章:动态生成文本框
- ·下一篇文章:实现网页上的图片任意拖动
当前位置:K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS01 → 文章内容
横向图片滚动js代码
<
TABLE 
cellSpacing=0 
cellPadding=0
 
width=100% 
align=center 
border=0>
<
TBODY>
<
TR>
<
TD 
width="
769"
>
<
DIV 
id=demo 
style="
OVERFLOW: 
hidden
 
WIDTH:550px
 
COLOR: 
#ffffff
 
HEIGHT: 
130px"
>
<
TABLE 
cellPadding=0 
align=left 
border=0 
cellspace="
0"
>
<
TBODY>
<
TR>
<
TD 
id=demo1 
vAlign=top>
<
TABLE 
cellSpacing=0 
cellPadding=0 
border=0>
<
TBODY>
<
TR>
<
TD>
<
A 
href="
#"
 
target=_blank>
<
IMG 
src="
images/a1.jpg"
 
width="
135"
 
height=90
hspace=2 
>
<
/A>
<
/TD>
<
TD 
width=15>
<
/TD>
 
 
<
TD>
<
A 
href="
#"
 
target=_blank>
<
IMG 
src="
images/a2.jpg"
 
width="
135"
 
height=90
 
hspace=2 
>
<
/A>
<
/TD>
<
TD 
width=15>
<
/TD>
 
<
TD>
<
A 
href="
#"
 
target=_blank>
<
IMG 
src="
images/a6.jpg"
 
width="
135"
 
height=90 
hspace=2>
<
/A>
<
/TD>
<
TD 
width=15>
<
/TD>
 
<
TD>
<
A 
href="
#"
 
target=_blank>
<
IMG 
src="
images/a4.jpg"
 
width="
135"
 
height=90 
hspace=2 
>
<
/A>
<
/TD>
<
TD 
width=15>
<
/TD>
 
<
TD>
<
A 
href="
#"
 
target=_blank>
<
IMG 
src="
images/a5.jpg"
 
width="
135"
 
height=90
 
hspace=2 
>
<
/A>
<
/TD>
<
TD 
width=15>
<
/TD>
<
/TR>
<
/TBODY>
<
/TABLE>
<
/TD>
<
TD 
id=demo2 
vAlign=top>
<
/TD>
<
/TR>
<
/TBODY>
<
/TABLE>
<
/DIV>
<
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>
 
<
/TR>
<
/TBODY>
<
/TABLE>
源码下载地址:http://www.aspprogram.cn/soft.asp?id=25
TABLE 
cellSpacing=0 
cellPadding=0
 
width=100% 
align=center 
border=0>
<
TBODY>
<
TR>
<
TD 
width="
769"
>
<
DIV 
id=demo 
style="
OVERFLOW: 
hidden
 
WIDTH:550px
 
COLOR: 
#ffffff
 
HEIGHT: 
130px"
>
<
TABLE 
cellPadding=0 
align=left 
border=0 
cellspace="
0"
>
<
TBODY>
<
TR>
<
TD 
id=demo1 
vAlign=top>
<
TABLE 
cellSpacing=0 
cellPadding=0 
border=0>
<
TBODY>
<
TR>
<
TD>
<
A 
href="
#"
 
target=_blank>
<
IMG 
src="
images/a1.jpg"
 
width="
135"
 
height=90
hspace=2 
>
<
/A>
<
/TD>
<
TD 
width=15>
<
/TD>
 
 
<
TD>
<
A 
href="
#"
 
target=_blank>
<
IMG 
src="
images/a2.jpg"
 
width="
135"
 
height=90
 
hspace=2 
>
<
/A>
<
/TD>
<
TD 
width=15>
<
/TD>
 
<
TD>
<
A 
href="
#"
 
target=_blank>
<
IMG 
src="
images/a6.jpg"
 
width="
135"
 
height=90 
hspace=2>
<
/A>
<
/TD>
<
TD 
width=15>
<
/TD>
 
<
TD>
<
A 
href="
#"
 
target=_blank>
<
IMG 
src="
images/a4.jpg"
 
width="
135"
 
height=90 
hspace=2 
>
<
/A>
<
/TD>
<
TD 
width=15>
<
/TD>
 
<
TD>
<
A 
href="
#"
 
target=_blank>
<
IMG 
src="
images/a5.jpg"
 
width="
135"
 
height=90
 
hspace=2 
>
<
/A>
<
/TD>
<
TD 
width=15>
<
/TD>
<
/TR>
<
/TBODY>
<
/TABLE>
<
/TD>
<
TD 
id=demo2 
vAlign=top>
<
/TD>
<
/TR>
<
/TBODY>
<
/TABLE>
<
/DIV>
<
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>
 
<
/TR>
<
/TBODY>
<
/TABLE>
源码下载地址:http://www.aspprogram.cn/soft.asp?id=25
横向图片滚动js代码