var ScrollUl=function(containerId, numViews, showTime, scrollTime)
{
 //定時器變量，因為有移到層上時停止滾動的事件處理，而那時可能還沒開始定時器呢，所以先把這個變量聲明出來。
 this.timer=null;
 this.numViews = numViews;
 this.showTime = showTime;
 this.scrollTime = scrollTime;

 this.container = document.getElementById(containerId);
 var ulChild = this.container.getElementsByTagName('ul');
 //這裡只有一個 ul 節點，取得它
 var ul = ulChild[0];
 //ul 是未使用 CSS 明確指定高度的，IE 中用 realstyle 取不到高度，只能得到 auto，而 getBoundingClientRect() 是 IE 和 FF 都支持的方式。
 var rect = ul.getBoundingClientRect();
 var heightAll = rect.bottom - rect.top;
 //每一屏的實際像素高度
 var heightView = heightAll / this.numViews;
 //每移動1像素用的毫秒數
 var msPerPx = this.scrollTime / heightView;

 //複製出一份來，接在原塊的後面，用於頭接尾的顯示
 var ulCopy = ul.cloneNode(true);
 ulCopy.style.top = heightAll+'px';
 this.container.appendChild(ulCopy);

 //要在事件處理函數中使用當前類，得把 this 賦值給一個此範圍的變量，如 itself。其實此範圍內的變量都是直接可用的，如：heightView， msPerPx
 var itself = this;
 //向上滾動的函數
 var scrollView = function()
 {
  var oldTop = (''==ul.style.top) ? 0: parseInt(ul.style.top) ;
  //移動到頂後，把位置復原，兩個塊繼續從 0 開始向上移。
  if (oldTop < -heightAll)
  {
   oldTop = 0;
  }
  ul.style.top = (oldTop - 1) +'px';
  ulCopy.style.top = (oldTop + heightAll- 1) +'px';

  //每滾一整屏多停一會。oldTop-1 是為了讓其停在整數位置。
  var duration = (0 == ((oldTop-1) % heightView)) ? itself.showTime:msPerPx;
  itself.timer = setTimeout(scrollView, duration);
 };

 //把 slide 定義為 prototype 的方法時，似乎這樣 setTimeout(itself.slide, itself.showTime); 定時操作不靈，而只能是局部函數才能定時操作，如果帶參數，還得封裝成匿名函數：
 itself.timer = setTimeout(scrollView, itself.showTime);
 //鼠標移上時停止滾動
 this.container.onmouseover = function()
 {
  window.clearTimeout(itself.timer);
 };
 //鼠標移開時繼續滾動，不用區分當時是在整屏停止還是滾動中了，全都按靜止時間來延時就得了。
 this.container.onmouseout = function()
 {
  itself.timer = setTimeout(scrollView, itself.showTime);
 };
};
window.onload = function()
{
 //第一個總共 20 行，每次顯示 4 行，分 5 屏
 var s1 = new ScrollUl('scrollUlT125', 5, 3000, 1000);
 //第二個總共 18 行，每次顯示 6 行，分 3 屏
 var s2 = new ScrollUl('scrollUlT127', 5, 3000, 1000);
};