• 11-09-2012, 12:15:28
    #1
    arkadaşlar bir adet div slider yaptım fakat istediğim şudur mouse üzerine gelince slider dursun kodları aşağıda paylaşıyorum lütfen acil yardımcı olur musunu ?

    istediğim şu mouse gelince slider dursun mouse gidince devam etsin bu kadar

    js dosyam

    $(document).ready( function() { // Sayfamız hazır olduğu zaman aşağıdaki kodların uygulanacağını söylüyoruz.
    var i = 0; // Hangi sayfada/slaytta [0, 1, 2, 3, 4] olduğumuzu atayacağımız değişken.
    var tumgenislik = 0; // Bu değişkende kaçıncı sayfada/slaytta ise o ve ondan önceki slaytların genişliklerinin toplamı yer alacak. Başlangıç değeri olarak 0 atıyoruz.
    var genislik = $('#slider div').width(); // Ola ki slider 'ın genişliğini değiştirmek istersek hem css hem .js dosyamızda değişiklik yapmamak için '#slider div' etiketinin genişliğini bu değişkene atıyoruz.


    function animasyon(px){ // Slider 'ımızın geçiş animasyonu için animasyon adında fonksiyon oluşturuyoruz.
    $('#slider').stop(false, false).animate({ // #slider 'a animasyon tanımlıyoruz. Slider 'da gördüğümüz sayfaların hepsi #slider 'ın içinde bulunmakta.
    left: -px // Fonksiyona girilen px değişkeni kadar sola kaymasını sağlıyoruz.
    }, 300); // Buradaki değer animasyonun gerçekleşeceği milisaniyeyi belirtiyor.

    }

    $('#sayfalama a').click(function(){ // #slider 'ın sol alt köşesinde belirlediğimiz 5 adet linke tıklanınca yapılacak işlem için fonksiyon oluşturuyoruz.
    var index = $(this).index(); // Linke tıklanınca kaçıncı link olduğunu index() ile alıyoruz. İlk link 1 değil 0 değerini vermektedir.
    pozisyon = index * genislik; // #slider 'ımızı ne kadar sola kaydıracağımızı belirten değişken. Örneğin ikinci linke tıklayınca 1*500 değerini alacaktır.
    animasyon(pozisyon); // Bir önceki satırda belirlediğimiz pozisyon değişkeni kadar #slider 'ımızın sola gitmesi için gerekli fonksiyonu çalıştırıyoruz.
    if(index == 4){ // #sliderımız son sayfaya/slayta geldiğinde sayfalarımız bitmiş olacağı için #slider 'ı en başa götürmemize yarıyan şart cümleciği.
    i = 0; // Şart cümlediğimiz true dönerse i değişkenine 0 değerini atayıp #slider 'ımızı en başa götürüyoruz.
    }else{
    i = index + 1; // Şart cümleciğimiz false dönerse i değişkenine bir sonraki sayfanın kaçıncı sayfa olduğunu belirtiyoruz.
    }
    return false; // Fonksiyonunun daha işlem yapmasına gerek kalmadığını belirtiyoruz.
    });

    var zamanlayici = setInterval(function() { // zamanlayici adında bir zamanlayıcı/timer belirliyoruz.
    tumgenislik = i * genislik; // tumgenislik değişkenini 3. satırda açıklamıştık. Hangi sayfada isek o ve ondan önceki sayfaların/divlerin genişliklerinin toplamını alıyor.
    if(i==2){ // #slider 'ımızı son sayfaya geldiğini kontrol eden şart cümleciği
    i = -1; // Normalde ilk sayfamız için 0 değeri verilmesi gerek. Fakat alt satırda animasyon fonksiyonu çalışıp #slider sola doğru kayacağı için -1 değerini veriyoruz.
    }
    animasyon(tumgenislik); // #slider 'ımızın vakti gelince uygulayacağı animasyon fonksiyonu. #slider 'ı tumgenislik değişkeninin değeri kadar sola kaydırıyor.
    i++; // Zamanlayıcı her çalıştığında bir sonraki sayfaya/dive geçmesi için i değişkenini her seferinde 1 arttırıyoruz.
    }, 2000); // Buradaki değer ise zamanlayıcımızın kaç milisaniyede bir çalışması gerektiğini belirtiyor.


    });



    html kodlarım


    <div id="featured-slider"> <!-- jQuery slider/Manşet haber sistemimizin konumlandırmasını sağlayacak olan element -->
    <div id="slider"> <!-- Bu element sayesinde sola sağa kayma işlemlerini yapacağız. -->



    <div> <!-- Birinci slayt/sayfa için başlangıç -->

    <div style="background:url(images/resim1.png); width:100%; height:548px; float:left;">



    <div style="background:#033; width:960px; height:auto; float:none; margin:auto; margin-top:100px;">

    <div style="width:500px; height:auto; float:left;">

    <div style="background:url(images/karekod.png); width:79px; height:79px; float:left;"> </div> <!--karekod-->

    <div style="width:305px; height:80px; margin-left:15px; font-family:Helvetica, sans-serif; font-size:24px; color:#FFF; letter-spacing:1px; line-height:26px;">

    Kredi kartın yanında
    olmasa da ödeme
    yapabilirsin

    </div>

    <div style="width:330px; height:auto; float:left; margin-top:15px;"> <!--uye ol form başı-->

    <span style="font-family:Helvetica, sans-serif; font-size:12px; color:#FFF; letter-spacing:0.7px;">Kolay, hızlı ve güvenli ödeme yapmak için hemen başvurun.</span>

    <form action="#" method="get">

    <input type="text" class="slider-text" value="E-posta" onblur="if(this.value==''){this.value='E-posta'}" onclick="if(this.value=='E-posta'){this.value=''}"/>

    <input type="text" class="slider-text" value="Şifre" onblur="if(this.value==''){this.value='Şifre'}" onclick="if(this.value=='Şifre'){this.value=''}"/>

    <input type="submit" value="Hemen Şimdi Üye Ol" class="slider-button" />

    </form>

    </div> <!--uye ol form sonu-->

    <div style="width:303px; height:auto; float:left; margin-top:15px;">

    <img src="images/qrlira.png" alt="" />

    <div style="width:180px; height:auto; float:right;">

    <a href="#" style=" float:left; font-family:Helvetica, sans-serif; font-size:16px; color:#FFF; letter-spacing:0.6px; margin-left:10px; margin-top:8px;">her alışverişinde <br /> QRlira kazan</a>

    </div>

    </div> <!--QR Bitimi-->

    </div>

    </div>



    </div>


    </div> <!-- Birinci slayt/sayfa için bitiş -->


    <div> <!-- Birinci slayt/sayfa için başlangıç -->

    <div style="background:url(images/resim1.png); width:100%; height:548px; float:left;">



    <div style="background:#033; width:960px; height:auto; float:none; margin:auto; margin-top:100px;">

    <div style="width:500px; height:auto; float:left;">

    <div style="background:url(images/karekod.png); width:79px; height:79px; float:left;"> </div> <!--karekod-->

    <div style="width:305px; height:80px; margin-left:15px; font-family:Helvetica, sans-serif; font-size:24px; color:#FFF; letter-spacing:1px; line-height:26px;">

    Kredi kartın yanında
    olmasa da ödeme
    yapabilirsin

    </div>

    <div style="width:330px; height:auto; float:left; margin-top:15px;"> <!--uye ol form başı-->

    <span style="font-family:Helvetica, sans-serif; font-size:12px; color:#FFF; letter-spacing:0.7px;">Kolay, hızlı ve güvenli ödeme yapmak için hemen başvurun.</span>

    <form action="#" method="get">

    <input type="text" class="slider-text" value="E-posta" onblur="if(this.value==''){this.value='E-posta'}" onclick="if(this.value=='E-posta'){this.value=''}"/>

    <input type="text" class="slider-text" value="Şifre" onblur="if(this.value==''){this.value='Şifre'}" onclick="if(this.value=='Şifre'){this.value=''}"/>

    <input type="submit" value="Hemen Şimdi Üye Ol" class="slider-button" />

    </form>

    </div> <!--uye ol form sonu-->

    <div style="width:303px; height:auto; float:left; margin-top:15px;">

    <img src="images/qrlira.png" alt="" />

    <div style="width:180px; height:auto; float:right;">

    <a href="#" style=" float:left; font-family:Helvetica, sans-serif; font-size:16px; color:#FFF; letter-spacing:0.6px; margin-left:10px; margin-top:8px;">her alışverişinde <br /> QRlira kazan</a>

    </div>

    </div> <!--QR Bitimi-->

    </div>

    </div>



    </div>


    </div> <!-- Birinci slayt/sayfa için bitiş -->

    <div> <!-- Birinci slayt/sayfa için başlangıç -->

    <div style="background:url(images/resim1.png); width:100%; height:548px; float:left;">



    <div style="background:#033; width:960px; height:auto; float:none; margin:auto; margin-top:100px;">

    <div style="width:500px; height:auto; float:left;">

    <div style="background:url(images/karekod.png); width:79px; height:79px; float:left;"> </div> <!--karekod-->

    <div style="width:305px; height:80px; margin-left:15px; font-family:Helvetica, sans-serif; font-size:24px; color:#FFF; letter-spacing:1px; line-height:26px;">

    Kredi kartın yanında
    olmasa da ödeme
    yapabilirsin

    </div>

    <div style="width:330px; height:auto; float:left; margin-top:15px;"> <!--uye ol form başı-->

    <span style="font-family:Helvetica, sans-serif; font-size:12px; color:#FFF; letter-spacing:0.7px;">Kolay, hızlı ve güvenli ödeme yapmak için hemen başvurun.</span>

    <form action="#" method="get">

    <input type="text" class="slider-text" value="E-posta" onblur="if(this.value==''){this.value='E-posta'}" onclick="if(this.value=='E-posta'){this.value=''}"/>

    <input type="text" class="slider-text" value="Şifre" onblur="if(this.value==''){this.value='Şifre'}" onclick="if(this.value=='Şifre'){this.value=''}"/>

    <input type="submit" value="Hemen Şimdi Üye Ol" class="slider-button" />

    </form>

    </div> <!--uye ol form sonu-->

    <div style="width:303px; height:auto; float:left; margin-top:15px;">

    <img src="images/qrlira.png" alt="" />

    <div style="width:180px; height:auto; float:right;">

    <a href="#" style=" float:left; font-family:Helvetica, sans-serif; font-size:16px; color:#FFF; letter-spacing:0.6px; margin-left:10px; margin-top:8px;">her alışverişinde <br /> QRlira kazan</a>

    </div>

    </div> <!--QR Bitimi-->

    </div>

    </div>



    </div>


    </div> <!-- Birinci slayt/sayfa için bitiş -->


    </div> <!--slider end-->

    </div> <!--featured-slider end-->
  • 11-09-2012, 15:16:03
    #2
    Üyeliği durduruldu
    Merhaba, istediğiniz şey setInterval ve clearInterval ile yapılabiliyor.. Örnek bir jquery slider uygulamasının nasıl yazılacağına dair videolu eğitim linki aşağıdadır;

    (otomatik geçiş - üstüne gelince durma - düğmelere basınca geçme vs.)


    http://www.youtube.com/watch?v=WppxmcUc9Ok
  • 11-09-2012, 16:41:27
    #3
    hocam tsk ederım ama cozemedım bı yardımcı olsanız

    _darkod adlı üyeden alıntı: mesajı görüntüle
    Merhaba, istediğiniz şey setInterval ve clearInterval ile yapılabiliyor.. Örnek bir jquery slider uygulamasının nasıl yazılacağına dair videolu eğitim linki aşağıdadır;

    (otomatik geçiş - üstüne gelince durma - düğmelere basınca geçme vs.)


    http://www.youtube.com/watch?v=WppxmcUc9Ok
  • 11-09-2012, 16:52:30
    #4
    Üyeliği durduruldu
    Hocam video gayet açık, çözemediğiniz kısım nedir? Aslında yazdığınız kodlar o kadar karışık ki, benim çözememem gerekirdi En azından bir düzene sokup sorabilirdiniz sorunuzu.. İstediğiniz şey tam olarak aşağıdaki kodlarla yapılıyor;

    var zamanlayici = setInterval(function() {
    tumgenislik = i * genislik;
    if(i==2){
    	i = -1;
    }
    animasyon(tumgenislik);
    i++;
    }, 2000);
    
    $("#slider").hover(function(){
    	clearInterval(zamanlayici);
    }, function(){
    	zamanlayici = setInterval(function() {
    	tumgenislik = i * genislik;
    	if(i==2){
    		i = -1;
    	}
    	animasyon(tumgenislik);
    	i++;
    	}, 2000);
    })
  • 11-09-2012, 17:44:20
    #5
    hocam hay allah razı olsun cidden allah razı olsun hocam bu jquery yenı yenı ogrenmeye basladım bu calıstıgım sırkette bır ıs verdıler paso jquery sanırım sıze cok ısımız dusucek zamanla ucretıyle tabi


    _darkod adlı üyeden alıntı: mesajı görüntüle
    Hocam video gayet açık, çözemediğiniz kısım nedir? Aslında yazdığınız kodlar o kadar karışık ki, benim çözememem gerekirdi En azından bir düzene sokup sorabilirdiniz sorunuzu.. İstediğiniz şey tam olarak aşağıdaki kodlarla yapılıyor;

    var zamanlayici = setInterval(function() {
    tumgenislik = i * genislik;
    if(i==2){
    	i = -1;
    }
    animasyon(tumgenislik);
    i++;
    }, 2000);
    
    $("#slider").hover(function(){
    	clearInterval(zamanlayici);
    }, function(){
    	zamanlayici = setInterval(function() {
    	tumgenislik = i * genislik;
    	if(i==2){
    		i = -1;
    	}
    	animasyon(tumgenislik);
    	i++;
    	}, 2000);
    })
  • 15-09-2012, 01:59:35
    #6
    Üyeliği durduruldu
    //Kodlarını bu şekile eklersen bizim anlamamız rahat olur, Biraz flood oldu ama :)
  • 15-09-2012, 10:31:05
    #7
    Vody adlı üyeden alıntı: mesajı görüntüle
    //Kodlarını bu şekile eklersen bizim anlamamız rahat olur, Biraz flood oldu ama :)
    tşk ederım saolun