跑马灯效果[ 图片，文字 ]，鼠标悬停停止，鼠标移出继续

View Code

                <div id="demo" style="overflow: hidden; width:746px; color: #ffffff; height: 235px;">
                     <table border="0" cellpadding="0" cellspacing="0" class="line2" >
                       <tr>
                          <td style="height:2px">    
                          </td>
                       </tr>
                       <tr>
                          <td id="demo2" align="center"  style="height: 90px" valign="middle"  >
                          </td>
                          <td id="demo1" align="center" style="height: 90px" valign="middle">                                   
                            <table style="width:746px;height: 235px;">
                                <tr>
               <td>
               <img height="230px" width="230px" src="../images/award/230x230-1.jpg" style="border-style: none" />          
             </td>
               <td>
               <img height="230px" width="230px" src="../images/award/230x230-2.jpg" style="border-style: none" />          
             </td>
               <td>
               <img height="230px" width="230px" src="../images/award/230x230-3.jpg" style="border-style: none" />          
             </td>
               <td>
               <img height="230px" width="230px" src="../images/award/230x230-4.jpg" style="border-style: none" />          
             </td>
               <td>
               <img height="230px" width="230px" src="../images/award/230x230-5.jpg" style="border-style: none" />          
             </td>
             
              <td>
               <img height="230px" width="230px" src="../images/award/230x230-6.jpg" style="border-style: none" />          
             </td>
              <td>
               <img height="230px" width="230px" src="../images/award/230x230-7.jpg" style="border-style: none" />          
             </td>
              <td>
               <img height="230px" width="230px" src="../images/award/230x230-8.jpg" style="border-style: none" />          
             </td>
           </tr>      
                            </table>
                        </td>                                   
                      </tr>                                 
            </table>

                </div>

 

View Code

function test() {
            var speed = 10;
            demo2.innerHTML = demo1.innerHTML
            function Marquee() {
                if (demo2.offsetWidth - demo.scrollLeft <= 0)
                    demo.scrollLeft -= demo1.offsetWidth
                else {
                    demo.scrollLeft++
                }
            }
            var MyMar = setInterval(Marquee, speed)
            demo.onmouseover = function() { clearInterval(MyMar) }
            demo.onmouseout = function() { MyMar = setInterval(Marquee, speed) }
        }

 

 

转载于:https://www.cnblogs.com/JiangXiaoTian/articles/2550540.html