Jquery Akışkan 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

Jquery Akışkan Slider Yapımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2832)
RAPOR ET
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>



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