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-->
jquery acil yardım lütfen
6
●1.915
- 11-09-2012, 15:16:03Üyeliği durdurulduMerhaba, 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
- 11-09-2012, 16:52:30Üyeliği durdurulduHocam 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:20hocam 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
En azından bir düzene sokup sorabilirdiniz sorunuzu.. İstediğiniz şey tam olarak aşağıdaki kodlarla yapılıyor;