3种方法实现列表自动滚动

自动滚动这种效果在网页中还是比较常见的。现在，就我在做项目期间所用到的能够实现自动滚动的方法做一个总结。

方法一：用javascript原生代码实现，不需要依赖任何框架，代码及注释如下：

 1 　　　　//javascript原生自动滚动
 2         function startmarquee(lh,speed,delay,marqueeObj) {  //lh---每行列表的高度，speed---滚动的速度，delay---间隔多久滚动一次,marqueeObj---需要实现这个效果的id
 3             var p=false;
 4             var t;
 5             var o=document.getElementById(marqueeObj);  
 6             o.innerHTML+=o.innerHTML;
 7             o.style.marginTop=0;
 8             o.οnmοuseοver=function(){p=true;} //鼠标移入，停止滚动
 9             o.οnmοuseοut=function(){p=false;}//鼠标移出，继续滚动
10             
11             function start(){
12                 t=setInterval(scrolling,speed); //定时器，自动滚动
13                 if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
14             }    
15             
16             function scrolling(){
17                 if(parseInt(o.style.marginTop)%lh!=0){
18                     o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
19                     if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
20                 }else{
21                     clearInterval(t);
22                     setTimeout(start,delay);
23                 }
24             }
25             setTimeout(start,delay);
26         }
27         startmarquee(48,20,1000,"marqueebox"); //引用函数

 

方法二：依赖jquery,可以进行不定高的滚动

 1 　　　　　//列表自动滚动
 2         function scrollNews() { 
 3             var $news = $('#marqueebox table'); 
 4             var $lineHeight = $news.find('tr:first').height(); 
 5             $news.animate({ 'marginTop': -$lineHeight + 'px' }, 1000, function () { 
 6                 $news.css({ margin: 0 }).find('tr:first').appendTo($news); 
 7             }); 
 8         }
 9  
10         var scrollTimer = null; 
11         var delay = 2000; 
12         scrollTimer = setInterval(function () { 
13             scrollNews(); 
14         }, delay);      

 

方法三：从左往右轮播

 1 　　　　function ScrollImgLeft(start,end,wrap){ 
 2             var speed=40; 
 3             var scroll_begin = document.getElementById(start); 
 4             var scroll_end = document.getElementById(end); 
 5             var scroll_div = document.getElementById(wrap); 
 6             scroll_end.innerHTML=scroll_begin.innerHTML; 
 7             function Marquee(){ 
 8                 if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0){ 
 9                     scroll_div.scrollLeft-=scroll_begin.offsetWidth; 
10                 }else{
11                     scroll_div.scrollLeft++; 
12                 }
13             } 
14             var MyMar=setInterval(Marquee,speed); 
15             scroll_div.οnmοuseοver=function() {clearInterval(MyMar);} 
16             scroll_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed);} 
17         } 

 

基本上上面三种的新闻轮播方法在项目中已经够用了，希望能够对大家有所帮助~如有不懂，欢迎留言~~