原生JS實現(xiàn)列表內(nèi)容自動向上滾動效果

 <div id="review_box">
  <ul id="comment1">
   <li>第一條</li>
   <li>第二條</li>
   <li>第三條</li>
   <li>第四條</li>
   <li>第五條</li>
   <li>第六條</li>
  </ul>
  <ul id="comment2"></ul>
 </div>

 * {
  margin: 0;
  padding: 0;
 }
 div {
  width: 100px;
  height: 63px; /* 必須 */
  overflow: hidden;/* 必須 */
  margin: 50px auto;
  border: 1px solid red;
  text-align: center;
 }
 ul {
  list-style: none;
 }

window.onload = roll(50);
 function roll(t) {
  var ul1 = document.getElementById("comment1");
  var ul2 = document.getElementById("comment2");
  var ulbox = document.getElementById("review_box");
  ul2.innerHTML = ul1.innerHTML;
  ulbox.scrollTop = 0; // 開始無滾動時設(shè)為0
  var timer = setInterval(rollStart, t); // 設(shè)置定時器，參數(shù)t用在這為間隔時間（單位毫秒），參數(shù)t越小，滾動速度越快
  // 鼠標(biāo)移入div時暫停滾動
  ulbox.onmouseover = function () {
   clearInterval(timer);
  }
  // 鼠標(biāo)移出div后繼續(xù)滾動
  ulbox.onmouseout = function () {
   timer = setInterval(rollStart, t);
  }
 }
 // 開始滾動函數(shù)
 function rollStart() {
  // 上面聲明的DOM對象為局部對象需要再次聲明
  var ul1 = document.getElementById("comment1");
  var ul2 = document.getElementById("comment2");
  var ulbox = document.getElementById("review_box");
  // 正常滾動不斷給scrollTop的值+1,當(dāng)滾動高度大于列表內(nèi)容高度時恢復(fù)為0
  if (ulbox.scrollTop >= ul1.scrollHeight) {
   ulbox.scrollTop = 0;
  } else {
   ulbox.scrollTop++;
  }
 }