Mesaj #433901 - MaviTm - Jquery Carusel

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

Üye Girişi Yap