Merhaba oncelikle bu yaptığım js kutuphanesi hakkında bir isim bulamadım o yuzden hareketli resimler diye bir isim uydurdum. Eğer bu ozelliğin adı varsa afiş gosterici vs yorumda belirtirse sevinirim : )

Gecenlerde arkadaşım umutun bir projesinde arayuz geliştiricisi olarak yer aldım. Proje sinema ile ilgili bir siteydi ve bir kac js ozelliği vardı sinemaz.com buyrun burdan bakabilirsiniz. Bende hazır eklentileri kullanacağıma kendi kutuphanemi geliştireyim dedim ve ikinci uygulamamı yazdım. Uygulama biraz basit oldu ama işlevselliği var o yuzden sağdan sola kayan resimler beni sıkıyor ben değiştireyim diyorsanız bu hareketli resimler uygulaması tam size gore.

Uygulamaya giriş :

Uygulamada kullanılan diller : Css & jQuery

İlk işimiz olarak html ve css dosyamızı hazırlıyoruz kodlar;

Html kodlarımız;
Kod:

Css kodlarımız ;
Kod:
/* ================================================ */ /* ! hareketli resimler ozellikleri baslangic */ /* ================================================ */ .sol .sag .filmAfis .afisleriKaydiranOk .afisleriKaydiranOk a .afisleriKaydiranOk a img ul.filmler ul.filmler li ul.filmler li img.yeniFilm ul.filmler li a ul.filmler li a:hover ul.filmler li a img /* ================================================ */ /* ! hareketli resimler ozellikleri bitis */ /* ================================================ */

Şimdi en onemli kısım ab-hareketliResimler.js dosyasına geldik kullandığım fonskiyonlar :
jQuery size , jQuery css , jQuery eq bu fonksiyonları konu icerinde ufak caplı acıklayacağım saten js dosyasının iceriğinde baya bir acıklamada bulundum ama buradan anlatmak daha faydalı.

Genel js kodlarımız ;

Kod:
/** * -------------------------------------------------------------------- * ab-hareketliResimler.js dosyasi * Aycan BULBUL, [email protected] http://www.aycan.net/ * Tarih 23 Agustos 2010 * * jQuery hareketli resimler */ /** * sayfa yuklendiginde ilk altili li taglarini * aciyoruz. */ jQuery(document).ready(function() else } }); /** * Oncick İle gelen degerin yonunu belirleme * ve aktif olan li elementlerini bulma */ function kaydirmaKontrol(yon) else if(1 < q) } } } /** * afislerin solami sagami kaydirilacagi degeri aliyoruz * Sol : 1 * Sag : 2 */ else if(yon == "2") else } } } } /** * Afisleri saga kaydirma fonksiyonu */ function afisleriSagaKaydir(sayi,kacTane) /** * Li taglarini kapattiktan sonra tekradan sayi degerisi * ve k degerini ayarlayip sonraki alti tane olan li taglarimizin * style ozelligine display:block; kodunu gonderiyoruz. */ sayi=sayi + kacTane; for(k ;k