Jquery ile Basit Yazı ve Resim Geçişi
Sayfanızdaki yazı ve resimleri döngüsel olarak aynı alan içerisinde gösterebilirsiniz.
Son dakika haberlerini veya bir galerideki resimlerin hepsini bir anda göstermek yerine, sırasıyla veya karışık olarak aynı anlanda gösterebilirsiniz.
Kurulum:
Aşağıdaki dosyaları sitenizin kök klasörüne kopyalayın.
- jquery.js
- query.innerfade.js
- r1.jpg r2.jpg ve r3.jpg
Kullanımı:
Aşağıdaki kodu sayfanızın <head></head> etkiletleri arasına ekleyin.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('.yazi').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '20px'
});
$('.resim').innerfade({
animationtype: 'fade',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '230px'
});
});
</script>
Yazı veya Görsellerin Eklenmesi:
Aşağıdaki kodu sayfanızın <body></body> etikleri arasına ekleyin.
<div class="resim">
<img src="r1.jpg" width="400" height="230" />
<img src="r2.jpg" width="400" height="230" />
<img src="r3.jpg" width="400" height="230" />
</div>
<div class="yazi">
<p>İlk haberimiz bu olacak.</p>
<p>İkinci haberimiz bu olacak.</p>
</div>
Burada yazi ve resim isimli sınıflara sahip olan div elementlerini kullandık. Fonksiyonda ilgili yeri değiştirerek istediğiniz elemente bu özelliği ekleyebilirsiniz.
Özelleştirme:
Javascript fonksiyonunda yer alan şu parametreleri değiştirebilirsiniz.
animationtype: 'slide', // Geçiş efekti. Soluklaştırarak getirmek için" fade", kaydırarak getirmek için "slide" yazın.
speed: 750, // Animasyon hızı.
timeout: 2000, // Her öğenin gösterileceği süre.
type: 'random', // Gösterim sırası, sıralı gösterim için "sequence", karışık gösterim için "random" yazın.
containerheight: '20px' // Resim veya yazıların gösterileceği alanın yüksekliği.
Örnek dosyayı incelemek için buraya, tüm projeyi indirmek için buraya tıklayın.
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 
Hocam bahsettiğiniz dosyaları nasıl bulabiliriz. Siz bir link şeklinde koysaydınız oradan indirebilirdik. Bu konuda bilgilendirir misiniz? iioalsan@gmail.com
Yaznın sonunda indirme bağlantısı var.
Ellerine sağlık.
Elinize sağlık harika olmuş. Ben bunu sayfanın farklı yerlerinde olması için ne yapabilirim.
HTML ve CSS kullanarak istediğinz öğeye bu geçiş efektini verebilirsiniz.
Dem0su var mı ? en azından yapcağımız işi görebiliriz ?
Demo linki yazı içerisinde var.
Tebrikler gerçekten çok sade ve hoş ayrıcada geliştirilebilir...
Ben resimleri yana kaydırarak geçiş yapmak istiyorum. Bunu yapmam için daha farklı birşeymi yapmalıyım?
paylaşımın icin teşekkür ederim...çok işime yaradı...
Peki bunu mouse ile üzerine gelince değişen mousu oradan çektiğimizde eski haline dönen özlelliği var mı acaba ? Aynı şekilde Geçiş olucak
Jquery fonksiyonları ile bunu yapabilirsiniz.
allah razıolsun ellerine sağlık
sa arkdaşalr peki örneğin bnm duyurularm var onlar yukarı doğru yazıların öıkması için hangi komutu kulllanmam lazım acil yardım
Bu fonksiyonda iki türlü geçiş var, soluklaştırarak ve kaydırarak. Aşağıdaki komutu kullanabilirsiniz:
animationtype: 'slide',
Sayfamızda SwfObject.js ve açılrı menu için kullanılan flexdropdown.js dosyaları da var. Bunlarla çakışmasını nasıl önleriz.
Çakışma olacağını sanmıyorum, kontrol için kaynak dosyaları e-postama gönderebilirsiniz.