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