图片向左连续滚动（ＪＡＶＡＳＣＲＩＰＴ）

最新推荐文章于 2025-06-29 16:28:34 发布

old_guy

最新推荐文章于 2025-06-29 16:28:34 发布

阅读量3.1k

点赞数

分类专栏：班门弄斧文章标签： border function div table

班门弄斧专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的横向图片滚动效果。通过调整速度参数来控制滚动的速度，并利用onmouseover和onmouseout事件暂停及恢复滚动，为用户提供了一个交互式的图片展示方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<CENTER>
<TABLE
style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid"
cellSpacing=0 cellPadding=0 width=300 align=center border=0>
<TBODY>
<TR>
    <TD>
      <DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
      <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
        <TBODY>
        <TR>
          <TD id=demo1 vAlign=top><table width="400" height="100" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="50" ><div align="center"><a href='#'><img src='CodeFiles/横向图片滚动/0001.jpg' /></a></div></td>
              <td width="50" ><div align="center"><a href='#'><img src='CodeFiles/横向图片滚动/0002.jpg' /></a></div></td>
              <td width="50" ><div align="center"><a href='#'><img src='CodeFiles/横向图片滚动/0003.jpg' /></a></div></td>
              <td width="50" ><div align="center"><a href='#'><img src='CodeFiles/横向图片滚动/0004.jpg' /></a></div></td>
            </tr>
          </table></TD>
          <TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>
      <SCRIPT>
var speed3=25//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</SCRIPT>
    </TD></TR></TBODY></TABLE></TD></TR></TABLE>
</CENTER>