Jquery Akışkan Slider Yapımı

Anasayfa
Bu dersimizde akışkan sliderin yapımını anlatacam.Kısaca mantığı şu.Tüm resimlerimizin bulunduğu alanı butona göre sağ sol yaptırıyoruz.O anki seçili objenin etrafındakileri animasyonla büyültüp küçültüyoruz.

Görüntüsü :
http://ustaderslik.com/resim/ders/u5mww.png
incele: http://ustaderslik.com/slider2/

indir : http://ustaderslik.com/dosya/aki%C5%9Fkan_slider.rar

Kodlar :


<!DOCTYPE HTML>

<html lang="en-US">

<head>

	<meta charset="UTF-8">

	<title>UstaDerslik</title>

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

	<script type="text/javascript">

		$(function(){

			var tindex=$(".slider_alan_ana #slider_alan").length-1;//toplan resim sayısı buluyorum ve 1 eksiltiyorum sebebi indexler 0 dan başlar

			var index=$(".slider_alan_ana .slider_buyuk").index();//büyük classı atanmış resmin indexsini alıyom

			var ortala=(index-2)*-80;//resmin tam ortalanacağı konumu buluyorum

			$(".slider_alan_ana").css("margin-left",ortala+"px");//ve ortalıyorum

			

			

			$("#slider_sag").click(function(){//sağ tuşa basılırsa

			if(index>0|| index==tindex){//sona varmamış ise

				var sol1=index-1; 

				var sol2=index-2; //sağındaki ve solundaki 2 resmi seç

				var sag2=index+2; 

				var sag1=index+1; 

				$(".slider_alan_ana").finish().animate({ marginLeft:"+=80" },300);//alanı 80 px sağa kaydır

				$(".slider_alan_ana #slider_alan:eq("+index+")").animate({ width:"125px",height:"125px",marginTop:"35px" },300);

				$(".slider_alan_ana #slider_alan:eq("+sag1+")").animate({ width:"75px",height:"75px",marginTop:"65px" },300);

				$(".slider_alan_ana #slider_alan:eq("+sol2+")").animate({ width:"125px",height:"125px",marginTop:"35px" },300);

				$(".slider_alan_ana #slider_alan:eq("+sol1+")").animate({ width:"175px",height:"175px",marginTop:"10px" },300);

				//ve sağındaki ve solundaki resimlerin boyutlarını animasyonlu şekilde büyültüyoruz

				

				index-=1;//indexi 1 azalt.Bunun sebebi artık büyük objenin indexi buna geçti

				}

			});

			

			$("#slider_sol").click(function(){//burası ise sol butonu için.Yukardakilerin hemen hemen aynısı.Sadece - yerine artılar var.

			if(index<tindex || index==0){

				var sol1=index-1; 

				var sol2=index-2; 

				var sag2=index+2; 

				var sag1=index+1; 

				$(".slider_alan_ana").finish().animate({ marginLeft:"-=80" },300);

				$(".slider_alan_ana #slider_alan:eq("+index+")").animate({ width:"125px",height:"125px",marginTop:"35px" },300);

				$(".slider_alan_ana #slider_alan:eq("+sag1+")").animate({ width:"175px",height:"175px",marginTop:"10px" },300);

				$(".slider_alan_ana #slider_alan:eq("+sag2+")").animate({ width:"125px",height:"125px",marginTop:"35px" },300);

				$(".slider_alan_ana #slider_alan:eq("+sol1+")").animate({ width:"75px",height:"75px",marginTop:"65px" },300);

				

				index+=1;

				}

			});

			

		});

	</script>

	<style type="text/css">

		.slider_ana{width:595px;height:200px;margin:auto;position:relative;overflow:hidden;background:#fff;box-shadow:0px 0px 10px #999;padding:20px;}

		.slider_kucuk{width:75px;height:75px;background:blue;float:left;margin-right:5px;margin-top:60px;}

		.slider_kucuk:last-child{margin-right:0px;}

		.slider_orta{width:125px;height:125px;background:blue;float:left;margin-right:5px;margin-top:35px;}

		.slider_buyuk{width:175px;height:175px;background:blue;float:left;margin-right:5px;margin-top:10px;}

		.slider_buton{width:50px;height:50px;position:absolute;bottom:10px;cursor:pointer;}

		.slider_buton img{width:50px;height:50px;}

		#slider_sag{right:10px;}

		#slider_sol{left:10px;}

		.slider_alan_ana{width:5000px;height:200px;overflow:hidden;}

		.slider_alan{display:block;border:0;padding:0px;margin:0px;}

		

		.temiz{clear:both;}

	</style>

</head>

<body>

	

<div class="slider_ana">

		<div class="slider_buton" id="slider_sag"><img src="sag.png" /></div>

		<div class="slider_buton" id="slider_sol"><img src="sol.png" /></div>

	<div class="slider_alan_ana">

		<img src="arka.jpg" class="slider_kucuk" id="slider_alan" />

		<img src="arka.jpg" class="slider_kucuk" id="slider_alan" />

		<img src="arka.jpg" class="slider_kucuk" id="slider_alan" />

		<img src="arka.jpg" class="slider_kucuk" id="slider_alan" />

		<img src="arka.jpg" class="slider_kucuk" id="slider_alan" />

		<img src="arka.jpg" class="slider_kucuk" id="slider_alan" />

		<img src="arka.jpg" class="slider_orta" id="slider_alan" />

		<img src="arka.jpg" class="slider_buyuk" id="slider_alan" />

		<img src="arka.jpg" class="slider_orta" id="slider_alan" />

		<img src="arka.jpg" class="slider_kucuk" id="slider_alan" />

		<img src="arka.jpg" class="slider_kucuk" id="slider_alan" />

		<img src="arka.jpg" class="slider_kucuk" id="slider_alan" />

		<img src="arka.jpg" class="slider_kucuk" id="slider_alan" />

		<img src="arka.jpg" class="slider_kucuk" id="slider_alan" />

		<img src="arka.jpg" class="slider_kucuk" id="slider_alan" />

		<div class="temiz"></div>

	</div>

</div>

	

</body>

</html>
Jquery Akışkan Slider Yapımı

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