<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>图片左右滚动，带有左右方向控制</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<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>
<BODY bgColor=#ffffff leftMargin=0 topMargin=0 marginheight="0" marginwidth="0">
<CENTER> <table border="0" width="490" cellspacing="5" cellpadding="0">
<tr>
<td width="20"><img id="r_l" onClick="r_left()"src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081200382654.gif">
</td>
<td>
<TABLE cellSpacing=0 cellPadding=0 width=450 border=0>
<TBODY>
<TR>
<TD vAlign=top background="" height=120>
<TABLE cellSpacing=0 cellPadding=0 width=450 border=0>
<TBODY>
<TR>
<TD vAlign=center align=middle height=120>
<!--------------------demo start------------------>
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 450px; COLOR: #ffffff; HEIGHT: 120px">
<TABLE cellPadding=0 width="100%" align=left border=0
cellspace="0">
<TBODY>
<TR>
<!--------------------demo1--------------------->
<TD id=demo1 vAlign=top>
<TABLE cellSpacing=1 cellPadding=1>
<TBODY>
<TR vAlign=top>
<TD vAlign=top noWrap>
<DIV align=right>
<TABLE cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD align=middle>
<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="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081200382624.jpg" width=130
border=0></A></TD></TR>
<TR>
<TD class=nav1 align=middle height=20><A class=apm2 href="#" target=_blank>风景1</A></TD></TR></TBODY></TABLE></TD>
<TD align=middle>
<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="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081200382663.jpg" width=130
border=0></A></TD></TR>
<TR>
<TD class=nav1 align=middle height=20><A class=apm2 href="#" target=_blank>风景2</A></TD></TR></TBODY></TABLE></TD>
<TD align=middle>
<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="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081200382644.jpg" width=130
border=0></A></TD></TR>
<TR>
<TD class=nav1 align=middle height=20><A class=apm2 href="#" target=_blank>风景3</A></TD></TR></TBODY></TABLE></TD>
<TD align=middle>
<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="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081200382624.jpg" width=130
border=0></A></TD></TR>
<TR>
<TD class=nav1 align=middle height=20><A class=apm2 href="#" target=_blank>风景4</A></TD></TR></TBODY></TABLE></TD>
<TD align=middle>
<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="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081200382663.jpg" width=130
border=0></A></TD></TR>
<TR>
<TD class=nav1 align=middle height=20><A class=apm2 href="#" target=_blank>风景5</A></TD></TR></TBODY></TABLE></TD>
<TD align=middle>
<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="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081200382644.jpg" width=130
border=0></A></TD></TR>
<TR>
<TD class=nav1 align=middle height=20><A class=apm2 href="#" target=_blank>风景6</A></TD></TR></TBODY></TABLE></TD>
</TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></TD>
<!-------------------demo2--------------------->
<TD id=demo2 width="0"></TD>
</TR></TBODY></TABLE></DIV>
<!--------------------demo end------------------>
<SCRIPT>
var dir=1//每步移动像素，大＝快
var speed=1//循环周期（毫秒）大＝慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){//正常移动
//alert(demo2.offsetWidth+"\n"+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 width="20"><img id="r_r" onClick="r_right()" src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081200382645.gif">
</td>
</tr>
</table>
</CENTER>
</BODY>
</HTML> |
注册 登录
