Merhaba arkadaşlar bu yazımda JQuery kullanarak Slider yani kayan objeler nasıl yapacağız onu öğreneceğiz.
Öncelikle bunu kullanacağımız yerde iki tane .js dosyasını sayfaya çağırmamız gerekmektedir.
Dosyalar:
jquery-1.3.2.js (117,93 kb)
jquery.easing.1.3.js (7,91 kb)
Bu iki dosyayı da indirdikten sonra sayfamıza şu kodlarla çağıracaksınız.
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
JAVASCRİPT / JQUERY kısmı :
Evet artık jquery dosyalarımızı çağırdığımıza göre javascript kodlarımızı yazabiliriz. Ben kendimce hızlı bir tasarım yaptım ve ona göre javascript kodlarımı yazdım.
<script type="text/javascript">
var mpPos = 0;
var mpItemC;
var mpItemW = 105;
var mpItemCW = 0;$(document).ready(
function() {mpItemC = $('#item-container');
mpItemCW = mpItemC.width();
$('#ileri').click(function() {
if (mpPos == -735)
mpPos = 0; // rewind
else
mpPos -= mpItemW;
mpItemC.animate({ marginLeft: mpPos }, 1000, 'easeOutCubic');return false;
});
$('#geri').click(function() {
if (mpPos == 0)
mpPos = -735;
else
mpPos += mpItemW;
mpItemC.animate({ marginLeft: mpPos }, 1000, 'easeOutCubic');return false;
});
});
</script>
HTML kısmı :
<body> </body> tag'larımızın arasında aşağıdaki HTML kodlarını ekleyelim.
<div id="geri" style="width:70px;"><a href="#">Geri</a></div>
<div id="ileri" style="width:70px;"><a href="#">ileri</a></div>
<div style="width:500px; border:dotted 1px red; overflow:hidden;">
<div id="item-container" style="width:900px; height:200px;">
<div style="float:left; margin-left:5px; width:100px; height:200px; background-color:Yellow;">1-Doguhan AYDENIZ</div>
<div style="float:left; margin-left:5px; width:100px; height:200px; background-color:Red;">2-Doguhan AYDENIZ</div>
<div style="float:left; margin-left:5px; width:100px; height:200px; background-color:Yellow;">3-Doguhan AYDENIZ</div>
<div style="float:left; margin-left:5px; width:100px; height:200px; background-color:Red;">4-Doguhan AYDENIZ</div>
<div style="float:left; margin-left:5px; width:100px; height:200px; background-color:Yellow;">5-Doguhan AYDENIZ</div>
<div style="float:left; margin-left:5px; width:100px; height:200px; background-color:Red;">6-Doguhan AYDENIZ</div>
<div style="float:left; margin-left:5px; width:100px; height:200px; background-color:Yellow;">7-Doguhan AYDENIZ</div>
<div style="float:left; margin-left:5px; width:100px; height:200px; background-color:Red;">8-Doguhan AYDENIZ</div>
</div>
</div>
Dediğim gibi tasarımı istediğiniz gibi değiştirebilirsiniz. Ben yukarıdaki gibi 500px'lik bir div'in içine toplamı 840px eden bir div grubu ekledim. Siz kendi tasarımınıza göre kodlarla oynayabilirsiniz beceremediğiniz yada anlamadığınız kısım olursa bana e-posta gönderin.
Projenin tamamını aşağıdaki linkten indirebilirsiniz.
Html_JQuery_Slider.rar (35,75 kb)
Abone Ol