Merhaba yazmış olduğum bu uygulama ile sağa, sola, Aşağı, Yukarı şeklinde kayan içerikler oluşturmanız mümkün.
Çalışma mantığı çok basit sondaki öğeyi alıp baştarafa getiriyor tabiki bu işlemleri animasyonlu bir şekilde uyguluyor kes, yapıştır şeklinde.
Oluşturacağınız içeriğin otomatik hareket edip etmemeisini, kullanıcı müdahale ettiğinde otomatik hareketinin devre dışı kalıp kalmamasını ayarlayabildiğiniz gibi otomatik olarak sağa veya sola, aşağıya veya yukarıya kaymasını da ayarlayabiliyorsunuz.
Otomatik hareket edeceği zaman duraklama süresini kendiniz belirliyor ve akış eyleminin kaç mili saniyede olucağınıda ayarlayabiliyorsunuz.
Yukardaki belirttiğim özelliklerin default ayarları aşşağıdaki gibi
Javascript
var defaults = {
'ileriButton' : '.ileri',
'geriButton' : '.geri',
'akistipi' : 'h', /*v dikey, h yatay*/
'otomatik' : true,
'otomatikKapat' : true, /*kullaninici eylemlerinde otomatik hareketi devre disi birak*/
'duraklamaSn' : 2000,
'gecisSn' : 400,
'netarafa' : 1
}
Bir div içerisinde ul ve li tagları ile oluşan HTML yapısı şu şekilde
Yukardaki html kodlarına hayat vermek hareketlendirmek için şu şekilde uygulayabilirsiniz
$(".mavitmCalrusel").mavitmCarusel();
Yukardaki HTML örneği için küçük bir stilleme örneği
.kaykay{width:930px; height:160px; padding:10px; background-color:#ebebeb; border:1px solid #CCC; position:relative; margin-left:50px;}
.mavitmCalrusel{width:930px; height:160px; overflow:hidden;}
.mavitmKaykay{list-style:none; margin:0px; padding:0px; width:930px; height:160px; }
.mavitmKaykay li{ width:300px; height:160px; padding:5px; float:left;}
.mavitmKaykay li img{width:300px; min-height:160px;}
.kaykay .ileri{width:48px; height:48px; background:url(images/caruselarraows.png) no-repeat bottom right; position:absolute; top:40%; left:-47px; cursor:pointer;}
.kaykay .geri{width:48px; height:48px; background:url(images/caruselarraows.png) no-repeat top left; position:absolute; top:40%; right:-47px; cursor:pointer;}
css içerisinde bulunan arka plan resmi
Bazı parametrelerinin kullanımı hakkında kısaca bilgi vereyim:
akistipi : v (vertical) olarak belirttiğimizde Yukarı ve aşağı hareket etmesini istediğimizi belirtiyoruz.
akistipi v ve otomatik true ise netarafa değeri 1 ise aşağı, 0ise yukarı şeklinde kendince otomatik hareket edecektir.
aynı şekilde akistipi : h olarak belirttiğimizdede sol veya sağ kaymasını belirtip netarafa seçimi ilede otomatik akış yönünü belirtiyoruz
Örnek uygulama sayfası için : http://mavitm.com/proje/carusel/
İndirmek için : http://mavitm.com/proje/carusel/carusel.zip
Daha önceden yazdığım takvim uygulaması içinde güncellemeler yaptım alttaki konuda 1.0 yeni hali 1.2
http://wmaraci.com/forum/javascript-jquery-ajax/takvim-uygulamasi-46999.html
