Result
1行
3行
jQuery
function ticker(){ //最初のアイテムから順にスライドアップ $('#news li:first').slideUp( function(){ $(this).appendTo($('#news')).slideDown(); }); } //setInterval()で要素を繰り返し呼び出す setInterval(function(){ticker()}, 5000);
css
a { color: #e8d421; text-decoration: none; } a:hover { color: #e82134; } .ticker { width: 600px; height: 60px;/*ここを変えれば表示するアイテム数を変更できる*/ overflow: hidden; margin: 60px 0 0 35px; padding: 0; list-style: none; text-shadow: 0px 1px 1px #000; font-size: 25px; } .ticker li { height: 60px; padding: 5px; margin: 0px 5px; }
html
<ul id="news" class="ticker"> <li>Item01</li> <li>Item02</li> <li>Item03</li> <li>Item04</li> </ul>