Jquery ile Manşet Haberler
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.
Web sitemi şu anda Masaüstü Görünümü'nde geziyorsunuz.
Mobil cihazınızdan geziniyorsanız Mobil Görünüm'e geçmek için 
En popüler kelime oyununda yarışmaya hazırsanız buraya 
Aradığınız ürünü akılınızdaki fiyata bulun. Hemen şimdi 
Mini blog sitesi 
Dosya yüklemeye izin vermiyor fakat şablonu HTML olarak kodlayabiliyoruz...
İndirme bağlantısını güncelledim, şimdi indirebilirsiniz.
Merhaba :D. Ben bunu blogger da kullanabilirmiyim??
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.
güzel çalışma.tşkler ahmet.