自動でアイテムを切り替えるニュースティッカー

Ads

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>

via

NEWS TICKER IN 4 LINES OF JQUERY

タイトルとURLをコピーしました