Oto Slider Mantığı Nedir? |
5 Mesajlar | 890 Okunma | ||
- Üyelik 25.01.2012
- Yaş/Cinsiyet 37 / E
- Meslek Webmaster
- Konum Ankara
- Ad Soyad M** K**
- Mesajlar 398
- Beğeniler 144 / 50
- Ticaret 14, (%100)
Javascript ile oto slider yapmanın mantığı nedir, koddan çok mantığını merak ediyorum ama kod ile örneklerseniz çok daha mutlu edersiniz beni :)
- Üyelik 25.05.2015
- Yaş/Cinsiyet 32 / E
- Meslek Web Yazılım Uzmanı
- Konum İstanbul Anadolu
- Ad Soyad F** K**
- Mesajlar 833
- Beğeniler 0 / 287
- Ticaret 13, (%100)
Mantık şu normal slider'ı yazdığınızı farz ediyorum.
animate metodu ile her li'yi 1 kere kaydırdığınızı ve her kaydırma da li'ler bitmiş mi diye kontrol ediyorsunuz. Eğer son li ye gelmiş isek başa sarıyoruz.
Aşağıda olayı koda döktüm benim sliderim ul li mantığı ile çalışıyor.
Her resim 1 li. Sliderin toplam boyutu 1 li uzunluk değeri çarpı toplam li sayisi.
Ve ben bu li'lerin 1 li uzunluğunda sola kaydırırsam bir sonraki resme geçmiş olacağım.
1 Kere sola kaydırma kodunu yazıp bir fonksiyona bağlıyorum daha sonra bunu setinterval ile tekrarlamasını istiyorum olay bu.
animate metodu ile her li'yi 1 kere kaydırdığınızı ve her kaydırma da li'ler bitmiş mi diye kontrol ediyorsunuz. Eğer son li ye gelmiş isek başa sarıyoruz.
Aşağıda olayı koda döktüm benim sliderim ul li mantığı ile çalışıyor.
Her resim 1 li. Sliderin toplam boyutu 1 li uzunluk değeri çarpı toplam li sayisi.
Ve ben bu li'lerin 1 li uzunluğunda sola kaydırırsam bir sonraki resme geçmiş olacağım.
1 Kere sola kaydırma kodunu yazıp bir fonksiyona bağlıyorum daha sonra bunu setinterval ile tekrarlamasını istiyorum olay bu.
<script>
/* Otomatik Dönme */
$.Slider = function (){
if (liDeger < toplamLi -1){ // bir sonraki resime gitme ve son resim mi kontrolü
liDeger++;
yeniWidth = liWidth * liDeger;
$(".Slider ul").animate({marginLeft: "-" + yeniWidth + "px" }, 500 ); }
else { // son resim ise başa dön 0.5 saniyede
liDeger = 0 ;
$(".Slider ul").animate({marginLeft:"0"},500);
} }
var don = setInterval("$.Slider()",sure); // otomatik döndür
$("#Slider").hover(function (){ // mouse ile üzerine geldiğinde otomatik döndürmeyi iptal et
clearInterval(don);
},function(){ // mouse sliderın dışında ise otomatik döndürmeyi başlat
don = setInterval("$.Slider()",sure);
} )
}) ;
</script>
- Üyelik 10.11.2013
- Yaş/Cinsiyet 26 / E
- Meslek Front-End Developer
- Konum Adana
- Ad Soyad S** D**
- Mesajlar 1345
- Beğeniler 234 / 472
- Ticaret 12, (%100)
FurkanKandemir javascript bilgim çok fazla olmadığı için merak ettim ve sorma gereksinimi duydum. liDeger, liWidth vb değişkenleri nerede tanımladınız kod da göremedim. Ayrıca bu değişkenlere verileri nasıl çektiniz ? liWidth değişkeni li elementinin width değerini nereden veya nasıl alıyor ?
sefacandemir.com.tr
- Üyelik 25.05.2015
- Yaş/Cinsiyet 32 / E
- Meslek Web Yazılım Uzmanı
- Konum İstanbul Anadolu
- Ad Soyad F** K**
- Mesajlar 833
- Beğeniler 0 / 287
- Ticaret 13, (%100)
SefaCanDemir
Normalde bu yazdığım kodların üst tarafı da var. Ben OtoSlider yapan bir function tanımladım.
Bu 4 parametreyi kodu yazan kişiden alıp daha sonra var ile Js değişkeni olarak tanımlayıp sizin bu liDeger liWidth dediğiniz değişkenlere atıyorum
Normalde bu yazdığım kodların üst tarafı da var. Ben OtoSlider yapan bir function tanımladım.
function SliderYap ($GelenId,$GelenWidth,$GelenHeight,$Sure)
Bu 4 parametreyi kodu yazan kişiden alıp daha sonra var ile Js değişkeni olarak tanımlayıp sizin bu liDeger liWidth dediğiniz değişkenlere atıyorum
var toplamLi = $(".Slider ul li").length;
var toplamWidth = liWidth*toplamLi;
var liDeger = 0;
$(".Slider ul").css("width", toplamWidth + "px");
- Üyelik 10.11.2013
- Yaş/Cinsiyet 26 / E
- Meslek Front-End Developer
- Konum Adana
- Ad Soyad S** D**
- Mesajlar 1345
- Beğeniler 234 / 472
- Ticaret 12, (%100)
FurkanKandemir anladım teşekkür ederim aydınlattığınız için :)
sefacandemir.com.tr
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)