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

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


Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7