Mouse Tekerlek Kontrollü Slider Yapımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Mouse Tekerlek Kontrollü Slider Yapımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2551)
RAPOR ET
Bu dersimizde mousenin tekerleğinin hareketine göre ilerleyen bir slider yapımını işleyeceğiz.Bir önceki dersimizde mouse tekerleğinin hareketini yakalayan plugini anlatmıştım.

http://ustaderslik.com/konu/Jquery_MouseWheel_Plugin

Şimdi mousewheel olayı yani tekerlek olayıyla bir slider yapacağız.

İndir : http://ustaderslik.com/dosya/MouseWheel%20Slider.rar

İncele : http://ustaderslik.com/slider3/

Görüntüsü :
http://ustaderslik.com/resim/ders/vbtkn.png

Şimdi kodlarımıza geçelim.


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jQuery_mousewheel_plugin.js"></script>
<script type="text/javascript">
$(function(){

var rs=$(".slider_kapla img").size(), //konulan resim sayısını alıyoruz.
ru=rs*960+960,//tüm resimleri içine alacak alanın boyutunu buluyoruz.
kontrol=1;//sliderin çalışıp çalışmadığını kontrol ettirmek için bir değişken .
$(".slider_kapla").css("width",ru+"px");//.slider kaplaya uzunluk değerini atıyoruz.

$(".slider").mousewheel(function(obje,yon){//eğer mouse tekerleği slider üzerinde oynatılırsa.

if (yon < 0){//yönü aşağı ise
if(kontrol==1){//ve animasyon oynamıyorsa
kontrol=0;//kontrolü 0 yap.yani animasyon oynuyor.
var rp=parseInt($(".slider_kapla").css("margin-left"));//slider_kapla pozisyonunu alıyoruz.
var rm=(rs-1)*-960;//bulunan resim sayısına göre gidebileceği yeri buluyoruz.
if(rp>rm){//eğer sona gitmediyse
$(".slider_kapla").finish().animate({marginLeft:"-=960px"},300,function(){ kontrol=1; }) //animasyonlu bir şekilde kaydırma yapıyoruz.Animasyon bittiğinde durum 1 yapıyoruz.
}else{
kontrol=1;
}
}
}

if (yon > 0){//eğer yön yukarı ise yukardakilerin tam tersi olarak diğer yöne kaydırıyoruz.
if(kontrol==1){
kontrol=0;
var rp=parseInt($(".slider_kapla").css("margin-left"));
var rm=(rs-1)*960;
if(rp<0){
$(".slider_kapla").finish().animate({marginLeft:"+=960px"},300,function(){ kontrol=1; })
}else{
kontrol=1;
}
}
}

});

})
</script>
<style type="text/css">
*{margin:0;padding:0;border:0;}
img{float: left;}
body{background:#333;}
.slider{width:960px;height:400px;border:10px solid #fff;margin:auto;margin-top:250px;overflow:hidden;box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-o-box-sizing:content-box;}
.slider_kapla img{width:960px;height:400px;}
</style>
</head>
<body>

<div class="slider">
<div class="slider_kapla">
<img src="http://www.freefever.com/stock/cute-scenery-background-wallpapers-cartoon-wallpaper.jpg" />
<img src="http://www.freefever.com/stock/cute-scenery-background-wallpapers-cartoon-wallpaper.jpg" />
<img src="http://www.freefever.com/stock/cute-scenery-background-wallpapers-cartoon-wallpaper.jpg" />
<img src="http://www.freefever.com/stock/cute-scenery-background-wallpapers-cartoon-wallpaper.jpg" />
<img src="http://www.freefever.com/stock/cute-scenery-background-wallpapers-cartoon-wallpaper.jpg" />
<img src="http://www.freefever.com/stock/cute-scenery-background-wallpapers-cartoon-wallpaper.jpg" />
<img src="http://www.freefever.com/stock/cute-scenery-background-wallpapers-cartoon-wallpaper.jpg" />
</div>
</div>

</body>
</html>


Farenin tekerleğini hareket ettirirseniz resimler teker teker geçecektir.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol