控制图片循环滚动方向

最新推荐文章于 2025-08-30 09:30:52 发布

原创最新推荐文章于 2025-08-30 09:30:52 发布 · 873 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#border #table #class #function #div #html

{把以下代码copy到这儿，点击“运行代码”按钮}
提示：你可以先修改部分代码再运行

鼠标移到左右图标上时改变图片循环滚动方向

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>图片左右滚动，带有左右方向控制</TITLE>

<STYLE type=text/css>TD {

FONT-SIZE: 12px

}

A:link {

COLOR: #a83300; TEXT-DECORATION: none

}

A:visited {

COLOR: #a83300; TEXT-DECORATION: none

}

A:active {

COLOR: #a83300; TEXT-DECORATION: underline

}

A:hover {

COLOR: #a83300; TEXT-DECORATION: underline

}

/**/

</STYLE>

</HEAD>

<tr>

</td>

<td>

<TBODY>

<TR>

<TBODY>

<TR>

<TABLE cellPadding=0 width="100%" align=left border=0

cellspace="0">

<TBODY>

<TR>

<TBODY>

<TBODY>

<TR>

<TABLE cellSpacing=0 cellPadding=0 width=150

align=center border=0>

<TBODY>

<TR>

<TD align=middle height=100><A

href="#"

target=_blank><IMG height=98

src="pic1.jpg" ait="pic1" width=130

border=0></A></TD></TR>

<TR>

<TD class=nav1 align=middle height=20><A

class=apm2

href="#"

target=_blank>pic1</A></TD></TR></TBODY></TABLE></TD>

<TABLE cellSpacing=0 cellPadding=0 width=150

align=center border=0>

<TBODY>

<TR>

<TD align=middle height=100><A

href="#"

target=_blank><IMG height=98

src="pic2.jpg" ait="pic2" width=130

border=0></A></TD></TR>

<TR>

<TD class=nav1 align=middle height=20><A

class=apm2

href="#"

target=_blank>pic2</A></TD></TR></TBODY></TABLE></TD>

<TABLE cellSpacing=0 cellPadding=0 width=150

align=center border=0>

<TBODY>

<TR>

<TD align=middle height=100><A

href="#"

target=_blank><IMG height=98

src="pic3.jpg" ait="pic3" width=130

border=0></A></TD></TR>

<TR>

<TD class=nav1 align=middle height=20><A

class=apm2

href="#"

target=_blank>pic3</A></TD></TR></TBODY></TABLE></TD>

<TABLE cellSpacing=0 cellPadding=0 width=150

align=center border=0>

<TBODY>

<TR>

<TD align=middle height=100><A

href="#"

target=_blank><IMG height=98

src="pic4.jpg" ait="pic4" width=130

border=0></A></TD></TR>

<TR>

<TD class=nav1 align=middle height=20><A

class=apm2

href="#"

target=_blank>pic4</A></TD></TR></TBODY></TABLE></TD>

<TABLE cellSpacing=0 cellPadding=0 width=150

align=center border=0>

<TBODY>

<TR>

<TD align=middle height=100><A

href="#"

target=_blank><IMG height=98

src="pic5.jpg" ait="pic5" width=130

border=0></A></TD></TR>

<TR>

<TD class=nav1 align=middle height=20><A

class=apm2

href="#"

target=_blank>pic5</A></TD></TR></TBODY></TABLE></TD>

<TABLE cellSpacing=0 cellPadding=0 width=150

align=center border=0>

<TBODY>

<TR>

<TD align=middle height=100><A

href="#"

target=_blank><IMG height=98

src="pic6.jpg" ait="pic6" width=130

border=0></A></TD></TR>

<TR>

<TD class=nav1 align=middle height=20><A

class=apm2

href="#"

target=_blank>pic6</A></TD></TR></TBODY></TABLE></TD>

</TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></TD>

</TR></TBODY></TABLE></DIV>

var dir=1//每步移动像素，大＝快

var speed=1//循环周期（毫秒）大＝慢

demo2.innerHTML=demo1.innerHTML

function Marquee(){//正常移动

//alert(demo2.offsetWidth+" "+demo.scrollLeft)

if (dir>0 && (demo2.offsetWidth-demo.scrollLeft)<=0) demo.scrollLeft=0

if (dir<0 &&(demo.scrollLeft<=0)) demo.scrollLeft=demo2.offsetWidth

demo.scrollLeft+=dir

demo.onmouseover=function() {clearInterval(MyMar)}//暂停移动

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//继续移动

}

function r_left(){if (dir=-1)dir=1}//换向左移

function r_right(){if (dir=1)dir=-1}//换向右移

var MyMar=setInterval(Marquee,speed)

</SCRIPT>

</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

</td>

</td>

</tr>

</table>

</CENTER>

</BODY></HTML>