Jquery ile Manşet Haberler

11 Ağu 2010 Çar 3 yorum

Jquery ve CSS kullanılarak yapılmış, sitenize entegre edilmesi kolay ve oldukça şık olan bu script Flash'ı aratmıyor.

Sitenizin anasayfasında animasyonlu haber akışına mı ihtiyacınız var? Flash ve XML ile uğraşmaya vaktiniz yok mu? O halde yazıyı okumya devam edin.

Özellikleri:

  • Resimler arası otomatik veya el ile animasyonlu geçiş
  • Kolay kullanım

 

Kurulum:

Aşağıdaki dosyaları sitenizin kök dizinine kopyalayın. Duruma göre scriptler ve stiller için ayrı klasörler belirtmişseniz oraya da kopyalayabilirsiniz. Ama kodların çağrılmasındaki adresi değiştirmeniz gerektiğini unutmayın.

  • jquery-1.4.2.min.js
  • stil.css
  • kurdele.png

 

Kullanım:

Sayfanızın <head></head> etiketleri arasın bu kodları ekleyin.

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    $(".paging").show();
    $(".paging a:first").addClass("active");
      
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;
   
    $(".image_reel").css({'width' : imageReelWidth});
   
    rotate = function(){    
        var triggerID = $active.attr("rel") - 1;
        var image_reelPosition = triggerID * imageWidth;

        $(".paging a").removeClass('active');
        $active.addClass('active');
      
        $(".image_reel").animate({
            left: -image_reelPosition
        }, 500 );
       
    };
   
    rotateSwitch = function(){        
        play = setInterval(function(){
            $active = $('.paging a.active').next();
            if ( $active.length === 0) {
                $active = $('.paging a:first');
            }
            rotate();
        }, 7000);
    };
    
    rotateSwitch();
   
    $(".image_reel a").hover(function() {
        clearInterval(play);
    }, function() {
        rotateSwitch();
    });    
   
    $(".paging a").click(function() {    
        $active = $(this);
        //Reset Timer
        clearInterval(play);
        rotate();
        rotateSwitch();
        return false;
    });    
    
});
</script>
<link href="stil.css" rel="stylesheet" type="text/css" />

HTML Dosyası İçeriği:

Sayfanızın <body></body> etiketleri arasına şu kodu yapıştırın.

<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="r1.jpg" alt="" /></a>
            <a href="#"><img src="r2.jpg" alt="" /></a>
            <a href="#"><img src="r3.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
    </div>
</div>

Yukarda gördüğünüz linkleri çoğaltarak sitenize daha fazla haber ekleyebilirsiniz. İsterseni ASP ve PHP kullanarak da haberleri veritabanından çekebilirsiniz.

Unutmayın, <div class="image_reel"> altına eklediğiniz her link için <div class="paging"> altına da sıra numarası eklemelisiniz.

Projenin önizlemesini izlemek için buraya, indirmek içinse buraya tıklayabilirsiniz.

16998 kez okundu.

3 Yorum Var

  1. Çağatay Karahan demiş ki

    Dosya yüklemeye izin vermiyor fakat şablonu HTML olarak kodlayabiliyoruz...

  2. Çağatay Karahan demiş ki

    Merhaba :D. Ben bunu blogger da kullanabilirmiyim??

    • Ahmet Soyarslan demiş ki

      Blogger kullanmadığım için kesin bir yanıt veremeyeceğim. Eğer Bloggler HTML kodlarının düzenlenmesine ve harici JavaScript / CSS dosyalarının yüklenmesine izin veriyorsa neden olmasın.

  3. hkn hkn demiş ki

    güzel çalışma.tşkler ahmet.



Yorum Yazın