[分享] 实用的不间断滚动图效果，具备良好兼容；

网上有不少图片滚动的效果代码，但大多兼容性不好，或者结构混乱，xhtml，css，js 均没有得到良好的优化，下面介绍一个方法；基本上实现结构跟行为相分离，两者的联系只需要一个
id就可以，使用起来很方便，而且同一个js代码可以实现在本页面多个滚动图效果，之间互不干扰，

1.xhtml

  
    

   
     
   
     <
   
     div 
   
     class
   
     =
   
     "
   
     demo
   
     "
   
      id
   
     =
   
     "
   
     demo1
   
     "
   
     >
   
     
 
   
     <
   
     table cellpadding
   
     =
   
     "
   
     0
   
     "
   
      cellspacing
   
     =
   
     "
   
     0
   
     "
   
     >
   
     
 
   
     <
   
     tr
   
     >
   
     
 
   
     <
   
     td
   
     ><
   
     ul
   
     >
   
     
 
   
     <
   
     li
   
     ><
   
     img src
   
     =
   
     "
   
     img.jpg
   
     "
   
     ><
   
     br
   
     >
   
     
 滚动图1
   
     </
   
     li
   
     >
   
     
 
   
     <
   
     li
   
     ><
   
     img src
   
     =
   
     "
   
     img.jpg
   
     "
   
     ><
   
     br
   
     >
   
     
 滚动图2
   
     </
   
     li
   
     >
   
     
 
   
     <
   
     li
   
     ><
   
     img src
   
     =
   
     "
   
     img.jpg
   
     "
   
     ><
   
     br
   
     >
   
     
 滚动图3
   
     </
   
     li
   
     >
   
     
 
   
     <
   
     li
   
     ><
   
     img src
   
     =
   
     "
   
     img.jpg
   
     "
   
     ><
   
     br
   
     >
   
     
 滚动图4
   
     </
   
     li
   
     >
   
     
 
   
     </
   
     ul
   
     ></
   
     td
   
     >
   
     
 
   
     </
   
     tr
   
     >
   
     
 
   
     </
   
     table
   
     >
   
     

   
     </
   
     div
   
     >
  
    
  
    

   
     <!--第二个滚动图开始-->

   
     <
   
     div 
   
     class
   
     =
   
     "
   
     demo
   
     "
   
      id
   
     =
   
     "
   
     demo2
   
     "
   
     >
   
     
 
   
     <
   
     table cellpadding
   
     =
   
     "
   
     0
   
     "
   
      cellspacing
   
     =
   
     "
   
     0
   
     "
   
     >
   
     
 
   
     <
   
     tr
   
     >
   
     
 
   
     <
   
     td
   
     ><
   
     ul
   
     >
   
     
 
   
     <
   
     li
   
     ><
   
     img src
   
     =
   
     "
   
     img.jpg
   
     "
   
     ><
   
     br
   
     >
   
     
 滚动图1
   
     </
   
     li
   
     >
   
     
 
   
     <
   
     li
   
     ><
   
     img src
   
     =
   
     "
   
     img.jpg
   
     "
   
     ><
   
     br
   
     >
   
     
 滚动图2
   
     </
   
     li
   
     >
   
     
 
   
     <
   
     li
   
     ><
   
     img src
   
     =
   
     "
   
     img.jpg
   
     "
   
     ><
   
     br
   
     >
   
     
 滚动图3
   
     </
   
     li
   
     >
   
     
 
   
     <
   
     li
   
     ><
   
     img src
   
     =
   
     "
   
     img.jpg
   
     "
   
     ><
   
     br
   
     >
   
     
 滚动图4
   
     </
   
     li
   
     >
   
     
 
   
     </
   
     ul
   
     ></
   
     td
   
     >
   
     
 
   
     </
   
     tr
   
     >
   
     
 
   
     </
   
     table
   
     >
   
     

   
     </
   
     div
   
     >
  
    

 

2.css

  
    

   
     
   
     ul,li,img,td{font
   
     -
   
     size:12px;list
   
     -
   
     style
   
     -
   
     type:none;text
   
     -
   
     align:center;margin:
   
     0
   
     ;padding:
   
     0
   
     ;}
.demo{width:230px;margin
   
     -
   
     bottom:8px;height:172px;overflow:hidden;
   
     }
.demo ul{width:408px;clear:both;
   
     }
.demo li{width:102px;
   
     float
   
     :left;text
   
     -
   
     align:center;}
.demo img{margin
   
     -
   
     bottom:8px;}
  
    

3.js

  
    

   
     
   
     function startmarquee(lh,speed,delay,index){
 var o
   
     =
   
     document.getElementById(
   
     "
   
     demo
   
     "
   
     +
   
     index);
 var o_td
   
     =
   
     o.getElementsByTagName(
   
     "
   
     td
   
     "
   
     )[
   
     0
   
     ];
 var str
   
     =
   
     o_td.innerHTML;
 var newtd
   
     =
   
     document.createElement(
   
     "
   
     td
   
     "
   
     );
 newtd.innerHTML
   
     =
   
     str;
 o_td.parentNode.appendChild(newtd);
 var t;
 var p
   
     =
   
     false
   
     ;
 o.onmouseover
   
     =
   
     function(){p
   
     =
   
     true
   
     ;}
 o.onmouseout
   
     =
   
     function() {p
   
     =
   
     false
   
     ;}
 function start(){
 t
   
     =
   
     setInterval(Marquee,speed); 
 
   
     if
   
     (
   
     !
   
     p){o.scrollLeft 
   
     +=
   
      
   
     3
   
     ;} 
 } 
 function Marquee(){
 
   
     if
   
     (o_td.offsetWidth
   
     -
   
     o.scrollLeft
   
     <=
   
     0
   
     )
 o.scrollLeft
   
     -=
   
     o_td.offsetWidth;
 
   
     else
   
     {
 
   
     if
   
     (o.scrollLeft
   
     %
   
     lh
   
     !=
   
     0
   
     ){
 o.scrollLeft
   
     +=
   
      
   
     3
   
     
 }
   
     else
   
     {clearInterval(t); setTimeout(start,delay);}
 }
 }
 setTimeout(start,delay);
}
startmarquee(
   
     102
   
     ,
   
     1
   
     ,
   
     1500
   
     ,
   
     1
   
     );//图片间停式滚动
startmarquee(
   
     102
   
     ,
   
     30
   
     ,
   
     1
   
     ,
   
     2
   
     );//图片不间断滚动
  
    

测试代码：js需要在html文件加载完成后执行，才能正常运行，所以记得将js放到div之后；图片滚动跟文字滚动实现原理上大同小异，关于此篇更多js代码的解释，请参看我的另一篇博客

浅析文字滚动效果

 

预览效果：

滚动图1 滚动图2 滚动图3 滚动图4

滚动图1 滚动图2 滚动图3 滚动图4

滚动图1 滚动图2 滚动图3 滚动图4

滚动图1 滚动图2 滚动图3 滚动图4