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ü :
Ş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.
UstaDerslik
