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.
Bunlar da İlginizi Çekebilir
20 Yorum Var
Hocam bahsettiğiniz dosyaları nasıl bulabiliriz. Siz bir link şeklinde koysaydınız oradan indirebilirdik. Bu konuda bilgilendirir misiniz? iioalsan@gmail.com
Elinize sağlık harika olmuş. Ben bunu sayfanın farklı yerlerinde olması için ne yapabilirim.
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
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.
Yorum Yazın
Hoşgeldiniz!
Son teknoloji haberlerinden, yazılım ve donanım incelemelerine, çeşitli fırsatlardan kampanya duyurularına kadar birçok konunun yer aldığı kişisel web siteme hoşgeldiniz.
Takipte Kalın!
Kişisel sitemdeki güncelleştirmelerden, haber ve yeniliklerden anında haberdar olmak çok kolay.
Mini blog sitesi Twitter'da site güncelleştirmelerini takip edebilirsiniz.
Facebook'ta sayfamı beğenerek haber paylaşımlarımı hesabınızdan takip edebilirsiniz.
İletişim sayfasını kullanarak bana mesaj gönderebilisiniz.
Masaüstü Görünümü
Web sitemi şu anda Mobil Görünüm'de geziyorsunuz.
Geniş ekranlı cihazınızdan geziniyorsanız Masaüstü Görünümü'ne geçmek için tıklayın.