<div id="wrapper">
<div id="title">NEWS</div>
<div  id="ticKer">
  <ul id="ulArea"> <!-- ul要素 箇条書き -->
    <li>縦にスクロールするニュースティッカーです。</li>
    <li>表示ボックスの下からスライドインします。</li>
    <li>前のテキストが上にスライドアウトしながら、</li>
    <li>次のテキストが下からスライドインしてきます。</li>
    <li>おしまい</li>
  </ul>
</div>
</div>

#wrapper {
  display: block;
  width:100%;
  text-align:center;
  margin:30px auto;
}
#title {
  font-size:20px;
  font-weight: 700;
  margin:0 0 20px 0;
}

#ticKer{
  border-radius: 20px; /* 角丸ボーダー */
  width: 500px;  /* 横幅 */
  background:#D8D8D8; /* 背景色 */
  position: relative; /* 相対配置（相対位置）*/
  overflow: hidden; /* はみ出た部分を非表示 */
  margin: 0 auto;
}
#ticKer ul{
  padding: 0; /* 内側余白*/
  margin: 0 auto; 
}
#ticKer li{
  list-style-type: none; /* リストマーク なし */
  line-height:2.5em;
  padding-left: 25px;
  color: #000;
  font-weight: 400;
  font-size: 16px;
  text-align:left;
}

var  upSpeed=15;  //メッセージのスライド速度
var  delay =3000; // 次のメッセージに切り替わるまでの静止時間
var  tickerH=40;  // 表示ボックスの高さ
 window.onload =function divScroller(){
  scroller = document.getElementById("ticKer"); // div 表示ボックス
  scroller.style.height= tickerH+"px"; // 表示ボックスの高さ
  scroller.style.lineHeight= tickerH+"px"; // 行の高さ  
	  slide = document.getElementById("ulArea"); // スライドさせる ul要素
	  slide.style.position = "absolute"; // 絶対配置
	  slide.style.top = tickerH+"px" ;  // slide のtop(上辺)の位置
	innScroll(tickerH, upSpeed, delay)
		  }
  function innScroll(tickerH, upSpeed, delay){
   msec = upSpeed; // スクロール時間
   numTop = parseInt(slide.style.top) // 数値文字列を整数に変換
　　if (numTop > -tickerH){ // top位置が -30にならない間は
　　　slide.style.top = (numTop-1)+"px"; // top位置を -1px 上へ
	　　　}
　　else{ slide.style.top = 0+"px"; 
               cngLi(); // 次のメッセージと交代
	　　　　　}
   if(numTop==0){msec = delay;// 静止時間 現在のメッセージを待機
	   }
    setTimeout("innScroll("+ tickerH +","+ upSpeed +"," + delay +")", msec);
		}
function cngLi(){ // メッセージの移動
   base= document.getElementById("ulArea");
    liList = base.getElementsByTagName("li");// 与えられたタグ名を持つ要素のリスト
     elm = liList[0];// 最上部の "li"要素
    base.appendChild(elm); // elm を子ノードとして末尾に移動する。
      }