两行滚动，鼠标放上去不能停止滚动的有关问题

两行滚动，鼠标放上去不能停止滚动的问题

<div id="demo">

        <div id="indemo">
          <div id="demo1">
            <ul>
               <li><span class="CSSPRE_sp3"><a href=""><img src="images/pic/3.jpg" onload="resize(this,194,162)"  /></a></span><span class="CSSPRE_sp2"><a href="">产品名称1</a></span></li>
              <li><span class="CSSPRE_sp3"><a href=""><img  src="images/pic/4.jpg" onload="resize(this,194,162)"  /></a></span><span class="CSSPRE_sp2"><a href="">产品名称2</a></span></li>
              <li><span class="CSSPRE_sp3"><a href=""><img  src="images/pic/1.jpg" onload="resize(this,194,162)"  /></a></span><span class="CSSPRE_sp2"><a href="">产品名称3</a></span></li>
              <li><span class="CSSPRE_sp3"><a href=""><img  src="images/pic/2.jpg" onload="resize(this,194,162)"  /></a></span><span class="CSSPRE_sp2"><a href="">产品名称4</a></span></li>
             <li><span class="CSSPRE_sp3"><a href=""><img  src="images/pic/3.jpg" onload="resize(this,194,162)" /></a></span><span class="CSSPRE_sp2"><a href="">产品名称5</a></span></li>
              <li><span class="CSSPRE_sp3"><a href=""><img  src="images/pic/4.jpg" onload="resize(this,194,162)"  /></a></span><span class="CSSPRE_sp2"><a href="">产品名称6</a></span></li>
            </ul>
          </div>
          <div id="demo2"></div>
        </div>


        <div id="indemo">
          <div id="demo3">
            <ul>
              <li><span class="CSSPRE_sp3"><a href=""><img  src="images/pic/3.jpg" onload="resize(this,194,162)"  /></a></span><span class="CSSPRE_sp2"><a href="">产品名称7</a></span></li>
              <li><span class="CSSPRE_sp3"><a href=""><img  src="images/pic/4.jpg" onload="resize(this,194,162)"  /></a></span><span class="CSSPRE_sp2"><a href="">产品名称8</a></span></li>
              <li><span class="CSSPRE_sp3"><a href=""><img  src="images/pic/1.jpg" onload="resize(this,194,162)"  /></a></span><span class="CSSPRE_sp2"><a href="">产品名称9</a></span></li>
              <li><span class="CSSPRE_sp3"><a href=""><img  src="images/pic/2.jpg" onload="resize(this,194,162)"  /></a></span><span class="CSSPRE_sp2"><a href="">产品名称10</a></span></li>
             <li><span class="CSSPRE_sp3"><a href=""><img  src="images/pic/3.jpg" onload="resize(this,194,162)" /></a></span><span class="CSSPRE_sp2"><a href="">产品名称11</a></span></li>
              <li><span class="CSSPRE_sp3"><a href=""><img  src="images/pic/4.jpg" onload="resize(this,194,162)"  /></a></span><span class="CSSPRE_sp2"><a href="">产品名称12</a></span></li>
            </ul>
          </div>
          <div id="demo4"></div>
        </div>



</div>

<script>
var speed1 = 30;
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerHTML = tab1.innerHTML; 
 
function Marquee1() {
if (tab2.offsetWidth - tab.scrollLeft <= 0) 
{
   tab.scrollLeft -= tab1.offsetWidth
}
else {
tab.scrollLeft += 1;
}
}

var MyMar1 = setInterval(Marquee1, speed1);
tab.onmouseover = function() {
clearInterval(MyMar1);
};
tab.onmouseout = function() {
MyMar1 = setInterval(Marquee1, speed1);
};
</script>


<script>
var speed2 = 30;
var taby = document.getElementById("demo");
var tab3 = document.getElementById("demo3");
var tab4 = document.getElementById("demo4");
tab4.innerHTML = tab3.innerHTML;

function Marquee2() {
if (tab4.offsetWidth - taby.scrollLeft <= 0) taby.scrollLeft -= tab3.offsetWidth
else {
taby.scrollLeft++;
}
}
var MyMar2 = setInterval(Marquee2, speed2);
taby.onmouseover = function() {
clearInterval(MyMar2)
};
taby.onmouseout = function() {
MyMar2 = setInterval(Marquee2, speed2)
};
</script>

 请大家帮忙看看，两行滚动的话，鼠标放上去不能停止滚动，可能是什么原因?
[解决办法]
你这个能停止一个计时器吧？
你为ID为demo的元素两次添加onmouseover事件
第二次会覆盖第一次，你可以把停止两个计时器的代码写在一个事件里
[解决办法]
给你一个js插件 js文字无缝左右滚动,可添加多个DIV
[解决办法]
你的tab和taby指的是同一个，为他们添加的不同的onmouseover事件，他只会执行最后的那个
你可以为你的id为indemo的这个div添加onmouseover事件，不过这两个div的id需要更改一下，改成indemo1和indemo2.即不能重复，现在只需要分别赋上事件就行了

var d1 = document.getElementById('indemo1'); 
d1.onmouseover = function() {
clearInterval(MyMar1);
};
d1.onmouseout = function() {
MyMar1 = setInterval(Marquee1, speed1);
};
var d2 = document.getElementById('indemo2'); 
d2.onmouseover = function() {
clearInterval(MyMar1);
};
d2.onmouseout = function() {
MyMar1 = setInterval(Marquee1, speed1);
};

查看更多 下一篇