eray aydoğdu

jQuery and ASP.NET MVC fanatic.

JQuery İle Slider Yapımı

JQuery ile tıklandığında kayan yazı yada kayan resim yapmamızı sağlayan basit ve geliştirmeye açık bir örnek.

jquery-1.3.2.js (117,93 kb)
jquery.easing.1.3.js (7,91 kb)
Bu iki dosyayı aşağıdaki kodlarla ilgili sayfamıza çağırıyoruz:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.easing.1.3.js' type='text/javascript'></script>

JQuery kodumuz:

kodun içerisindeki id ler ile tasarımınızdaki id lerin aynı olmasına özen göstermeliyiz. Aksi halde çalışmayacaktır.

<script type=”text/javascript”>
var mpPos = 0; var mpItemC;
var mpItemW = 105; var mpItemCW = 0;$(document).ready(
function() {mpItemC = $(‘#item-container’);
mpItemCW = mpItemC.width(); $(‘#sonraki’).click(function() {
if (mpPos == -735)
mpPos = 0; // rewind
else
mpPos -= mpItemW;
mpItemC.animate({ marginLeft: mpPos }, 1000,
‘easeOutCubic’);return false;
});
$(‘#onceki’).click(function() {
if (mpPos == 0)
mpPos = -735; else
mpPos += mpItemW;
mpItemC.animate({ marginLeft: mpPos }, 1000, ‘easeOutCubic’);return false;
});
});
</script>

HTML kodlarımız:

<div id=”onceki” style=”width:70px;”><a href=”#”>Önceki</a></div>
<div id=”sonraki” style=”width:70px;”><a href=”#”>Sonraki</a></div>
<div style=”width:500px; border:dotted 1px red; overflow:hidden;”>
<div id=”item-container” style=”width:900px; height:50px;”>
<div style=”float:left; margin-left:5px; width:100px; height:50px; background-color:Yellow;”>1-Resim/Yazi</div>
<div style=”float:left; margin-left:5px; width:100px; height:50px; background-color:Red;”>2-Resim/Yazi</div>
<div style=”float:left; margin-left:5px; width:100px; height:50px; background-color:Yellow;”>3-Resim/Yazi</div>
<div style=”float:left; margin-left:5px; width:100px; height:50px; background-color:Red;”>4-Resim/Yazi</div>
<div style=”float:left; margin-left:5px; width:100px; height:50px; background-color:Yellow;”>5-Resim/Yazi</div>
<div style=”float:left; margin-left:5px; width:100px; height:200px; background-color:Red;”>6-Resim/Yazi</div>
<div style=”float:left; margin-left:5px; width:100px; height:50px; background-color:Yellow;”>7-Resim/Yazi</div>
<div style=”float:left; margin-left:5px; width:100px; height:50px; background-color:Red;”>8-Resim/Yazi</div>
</div>
</div>

Tasarımında istediğiniz gibi değişiklikler olabilir. Tamamen size kalmış..

İyi Çalışmalar..

2 Responses to “JQuery İle Slider Yapımı”

  1. artık jquery 1.4.2 çıktı yazıyı güncellersen 1.4.2 yi çağırabilirsin

    Yorum by coder — 31 Ağustos 2010 @ 15:06

  2. bilgiler için çok teşekkürler

    Yorum by yazar kasa — 18 Şubat 2011 @ 06:43

Bu yazıya yapılan yorumlar için RSS beslemeleri. TrackBack URL

Leave a Response