不用marquee而使用JS控制图片纵向滚动，解决火狐不兼容

本文链接：https://blog.youkuaiyun.com/hpugym/article/details/48652731

本文提供了一种使用JavaScript替代marquee标签实现图片滚动的方法，解决了火狐浏览器兼容性问题，并实现了鼠标悬停时滚动暂停的功能。

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

火狐浏览使用marquee标签时候，存在兼容性问题，onMouseOut 和 onMouseOver，不能控制滚动的启停，在这里使用js进行控制

纵向滚动源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>不用marquee而使用JS控制图片纵向滚动，解决火狐不兼容</title>

</head>
<body>
<div id="demotop" style="OVERFLOW: hidden; height: 700px; width:200px; color: red">
  <ul style="list-style-type: none;">
    
      
        <li id="demo1top">
         <ul style="list-style-type: none;">
            
              <li><img src="images/001.jpg" width="100" height="89" /></li>
              <li><img src="images/001.jpg" width="100" height="89" /></li>
              <li><img src="images/001.jpg" width="100" height="89" /></li>
              <li><img src="images/001.jpg" width="100" height="89" /></li>
              <li><img src="images/001.jpg" width="100" height="89" /></li>
              <li><img src="images/001.jpg" width="100" height="89" /></li>
              <li><img src="images/001.jpg" width="100" height="89" /></li>
              <li><img src="images/001.jpg" width="100" height="89" /></li>
              <li><img src="images/001.jpg" width="100" height="89" /></li>
              <li><img src="images/001.jpg" width="100" height="89" /></li>
              <li><img src="images/001.jpg" width="100" height="89" /></li>
              <li><img src="images/001.jpg" width="100" height="89" /></li>
              <li><img src="images/001.jpg" width="100" height="89" /></li>
              <li><img src="images/001.jpg" width="100" height="89" /></li>
         
          </ul>
        </li>
        <li id="demo2top"></li>
          

  </ul>
</div>
<script type="text/javascript">

var speed=20//越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值
demo2top.innerHTML=demo1top.innerHTML
function Marquee(){
if(demo2top.offsetHeight-demotop.scrollTop<=0)
demotop.scrollTop-=demo1top.offsetHeight
else{
demotop.scrollTop++
}
}
var MyMartop=setInterval(Marquee,speed)
demotop.onmouseover=function() {clearInterval(MyMartop)}
demotop.onmouseout=function() {MyMartop=setInterval(Marquee,speed)}
</script> 
</body>
</html>

横向滚动源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>不用marquee而使用JS控制图片横向滚动</title>

</head>
<body>
<div id="demoleft" style="OVERFLOW: hidden; WIDTH: 700px; COLOR: red">
  <table>
    
      <tr>
        <td id="demo1left">
         <table>
            <tr>
              <td><img src="images/001.jpg" width="100" height="89" /></td>
              <td><img src="images/001.jpg" width="100" height="89" /></td>
              <td><img src="images/001.jpg" width="100" height="89" /></td>
              <td><img src="images/001.jpg" width="100" height="89" /></td>
              <td><img src="images/001.jpg" width="100" height="89" /></td>
              <td><img src="images/001.jpg" width="100" height="89" /></td>
              <td><img src="images/001.jpg" width="100" height="89" /></td>
              <td><img src="images/001.jpg" width="100" height="89" /></td>
              <td><img src="images/001.jpg" width="100" height="89" /></td>
              <td><img src="images/001.jpg" width="100" height="89" /></td>
              <td><img src="images/001.jpg" width="100" height="89" /></td>
              <td><img src="images/001.jpg" width="100" height="89" /></td>
              <td><img src="images/001.jpg" width="100" height="89" /></td>
              <td><img src="images/001.jpg" width="100" height="89" /></td>
             </tr>
          </table>
        </td>
        <td id="demo2left"></td>
      </tr>     

  </table>
</div>
<script type="text/javascript">

var speed=20//越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值
demo2left.innerHTML=demo1left.innerHTML
function Marquee(){
if(demo2left.offsetWidth-demoleft.scrollLeft<=0)
demoleft.scrollLeft-=demo1left.offsetWidth
else{
demoleft.scrollLeft++
}
}
var MyMarleft=setInterval(Marquee,speed)
demoleft.onmouseover=function() {clearInterval(MyMarleft)}
demoleft.onmouseout=function() {MyMarleft=setInterval(Marquee,speed)}
</script> 
</body>
</html>