Mouse Tekerlek Kontrollü Slider Yapımı

Anasayfa

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.

Mouse Tekerlek Kontrollü Slider Yapımı

Tüm Hakları Saklıdır. ©Arleone 2013-UstaDerslik