jQuery ile Kayan Haber Yapımı Örnek 1

Web sayfalarınızda kullanabileceğiniz efektif bir kayan haber uygulaması. Basit özelliklerde işinize yarayabilecek ve de geliştirilebilecek olan bu uygulamyı yazmaya başlayalım.
Öncelikle CSS betiklerini yazalım.
CSS Betiklerimiz

*{padding:0px;margin:0px;font-weight:normal;font-size:inherit;border:none;border-spacing:0px;}
body{font-family:Arial, Helvetica, sans-serif;background:#F5F5F5;font-size:12px;}
.kapsul{width:200px;min-height:1px;margin:10px auto;}
ul.haberler{list-style-type:none;width:200px;height:100px;overflow:hidden;background-color:#DDDDDD;}
ul.haberler li{display:block;width:200px;height:100px;padding:2px;}
h2{color:#6B6B6B;font-size:18px;margin-bottom:4px;}

Şimdi ise dinamikliği sağlayacak olan jQuery betiklerimizi yazalım.
jQuery Betiklerimiz

    function fnHaberKaydir() {
        $('.haberler li:first').slideUp(function () {
            $(this).appendTo($('.haberler')).slideDown(1000);
        });
    }
    setInterval(function(){fnHaberKaydir()}, 6000);

Uygulamamızın HTML tarafını yazalım
HTML Betiklerimiz

    <div class="kapsul">
        <ul class="haberler">
            <li>
                <h2>Haber 1</h2>
                <p>Birinci haberin içeriği burada yer alıyor.</p>
            </li>
            <li>
                <h2>Haber 2</h2>
                <p>İkinci haberin içeriği burada yer alıyor.</p>
            </li>
            <li>
                <h2>Haber 3</h2>
                <p>Üçüncü haberin içeriği burada yer alıyor.</p>
            </li>
        </ul>
    </div>