js はシームレスなスクロールを実現し、IE や FF_javascript スキルと互換性があります

原理分析:
1. 最初にコンテナの高さまたは幅 (ul など) を設定し、overflow:hidden を設定します。
2. コンテナの高さを設定した後、コンテンツの高さを設定します。 40pxを超えると、オーバーフローした部分が非表示になり、scrollTop属性が使用可能になります。overflow:scrollを使用して、コンテナのscrollTop（上下にスクロール）属性の値を変更します。コンテンツを 1 ノード分上下に移動します (スクロールの原理)。4. スクロールの高さがスクロールするノードの高さ以上の場合、scrollTop=0 を設定して子ノード ツリーの最初のノードから最後までスクロールすると、中断のないループ スクロール効果が表示されます。
html ソース コード

コードをコピー コードは次のとおりです:

src=" divCycle.js" src="divCycle.js">

javascript"> ;




js ソース コード




コードをコピーします

コードは次のとおりです。

// JavaScript Document

/*****
@author leaves chen (leaves615@gmail.com)
@copyright 2009
*****/
var pause=false;
var scrollTimeId=null;
var container=null;
var lineHeight=null;
var speed=0;
var delay=0;
simpleScroll=function(container1,lineHeight1,speed1,delay1){
    container=document.getElementById(container1);
    lineHeight=lineHeight1;
    speed=speed1;
    delay=delay1;
    //滚动效果
    scrollexc=function(){
        if(pause) return ;
        container.scrollTop =2;
        var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight;
        if(container.scrollTop%lh            clearInterval(scrollTimeId);
            fire();
            container.scrollTop=0;
            setTimeout(start,delay*1000);
        }
    };
    //开始滚动
    start=function(){
        var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight;
            if (container.scrollHeight - container.offsetHeight >= lh)
                scrollTimeId = setInterval(scrollexc, speed);
    };
    //把子节点树中的第一个移动到最后
    fire=function(){
        container.appendChild(container.getElementsByTagName('li')[0]);
    };
    container.onmouseover=function(){pause=true;};
    container.onmouseout=function(){pause=false;};
    setTimeout(start,delay*1000);
};