注册 登录
编程论坛 PHP技术论坛

html 实现图片从左向右不停的滑动(这个只能滑动再次)

伍则帝 发布于 2013-05-08 17:57, 2385 次点击
<div id="list" class=" picutre_many"   
    style="overflow: hidden; height: 90px; width: 840px; margin:0 auto;">  
          <table cellspacing="0" cellpadding="0"      
               style="width: 680px; border: 0px;">      
                <tr>           
                     <td id="list1">                  
                      <table style="border: 0px;" cellpadding="0" cellspacing="0">            
                                 <tr id="pic">                    
                        <td><img style="border: 0px;" alt="" src="01c1eec4b74543a987b78c571e178a82bb0114d0[1].jpg"/></td>               
                        <td><img style="border: 0px;" alt="" src="1.PNG"/></td>            
                        <td><img style="border: 0px;" alt="" src="2cf7020828381f3096b15ca0a8014c086f06f06c[1].jpg" /></td>         
                        <td><img style="border: 0px;" alt="" src="2.PNG"/></td>         
                        <td><img style="border: 0px;" alt="" src="4ed4638e9cb3181662343f69bdae547e.jpg" /></td>                     
              </tr>         
                        </table>            
                           </td>            
                              <td id="list2"></td>      
                                    </tr>   
                                        </table>  
                                          </div>
                               <script type="text/javascript">       /*图片滚动效果*/      
    var speedpic = 20;//速度数值越大速度越慢
        document.getElementById("list2").innerHTML = document.getElementById("list1").innerHTML;   
            
function Marqueepic() {   
if (document.getElementById("list2").offsetWidth - document.getElementById("list").scrollLeft <= 0) {         
                        document.getElementById("list").scrollLeft -= document .getElementById("list1").offsetWidth;     
                        } else {            
                               document.getElementById("list").scrollLeft++;     
                                      }   
                                   }  
                                     var MyMarpic = setInterval(Marqueepic, speedpic);   
                                         document.getElementById("list").onmouseover = function() {     
                                                clearInterval(MyMarpic);        }     
                                                   document.getElementById("list").onmouseout = function() {   
                                                           MyMarpic = setInterval(Marqueepic, speedpic);        }  
                               </script>
1 回复
#2
zp9982013-05-08 20:34
好好学习一下代码。
1