3種方法實現列表自動滾動

自動滾動這種效果在網頁中還是比較常見的。現在，就我在做項目期間所用到的能夠實現自動滾動的方法做一個總結。

方法一：用javascript原生代碼實現，不需要依賴任何框架，代碼及注釋如下：

　　　　//javascript原生自動滾動
        function startmarquee(lh,speed,delay,marqueeObj) {  //lh---每行列表的高度，speed---滾動的速度，delay---間隔多久滾動一次,marqueeObj---需要實現這個效果的id
            var p=false;
            var t;
            var o=document.getElementById(marqueeObj);  
            o.innerHTML+=o.innerHTML;
            o.style.marginTop=0;
            o.onmouseover=function(){p=true;} //鼠標移入，停止滾動
            o.onmouseout=function(){p=false;}//鼠標移出，繼續滾動
            
            function start(){
                t=setInterval(scrolling,speed); //定時器，自動滾動
                if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
            }    
            
            function scrolling(){
                if(parseInt(o.style.marginTop)%lh!=0){
                    o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
                    if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
                }else{
                    clearInterval(t);
                    setTimeout(start,delay);
                }
            }
            setTimeout(start,delay);
        }
        startmarquee(48,20,1000,"marqueebox"); //引用函數

 

方法二：依賴jquery,可以進行不定高的滾動

　　　　　//列表自動滾動
        function scrollNews() { 
            var $news = $('#marqueebox table'); 
            var $lineHeight = $news.find('tr:first').height(); 
            $news.animate({ 'marginTop': -$lineHeight + 'px' }, 1000, function () { 
                $news.css({ margin: 0 }).find('tr:first').appendTo($news); 
            }); 
        }
 
        var scrollTimer = null; 
        var delay = 2000; 
        scrollTimer = setInterval(function () { 
            scrollNews(); 
        }, delay);      

 

方法三：從左往右輪播

　　　　function ScrollImgLeft(start,end,wrap){ 
            var speed=40; 
            var scroll_begin = document.getElementById(start); 
            var scroll_end = document.getElementById(end); 
            var scroll_div = document.getElementById(wrap); 
            scroll_end.innerHTML=scroll_begin.innerHTML; 
            function Marquee(){ 
                if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0){ 
                    scroll_div.scrollLeft-=scroll_begin.offsetWidth; 
                }else{
                    scroll_div.scrollLeft++; 
                }
            } 
            var MyMar=setInterval(Marquee,speed); 
            scroll_div.onmouseover=function() {clearInterval(MyMar);} 
            scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed);} 
        } 

 

基本上上面三種的新聞輪播方法在項目中已經夠用了，希望能夠對大家有所幫助~如有不懂，歡迎留言~~