Yeni eklenen resimli içerikler için hareketli resimler

Merhaba öncelikle bu yaptığım js kutuphanesi hakkında bir isim bulamadım o yüzden hareketli resimler diye bir isim uydurdum. Eğer bu özelliğin adı varsa afiş gösterici vs yorumda belirtirse sevinirim : )

Geçenlerde arkadaşım umutun bir projesinde arayüz geliştiricisi olarak yer aldım. Proje sinema ile ilgili bir siteydi ve bir kaç js özelliği vardı sinemaz.com buyrun burdan bakabilirsiniz. Bende hazır eklentileri kullanacağıma kendi kütüphanemi geliştireyim dedim ve ikinci uygulamamı yazdım. Uygulama biraz basit oldu ama işlevselliği var o yüzden sağdan sola kayan resimler beni sıkıyor ben değiştireyim diyorsanız bu hareketli resimler uygulaması tam size göre.

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;

Css kodlarımız ;

Şimdi en önemli kısım ab-hareketliResimler.js dosyasına geldik kullandığım fonskiyonlar :
jQuery size , jQuery css , jQuery eq bu fonksiyonları konu içerinde ufak çaplı açıklayacağım saten js dosyasının içeriğinde baya bir açıklamada bulundum ama buradan anlatmak daha faydalı.

Genel js kodlarımız ;

Çok karmaşık duruyor ama aslında öyle değil açıklama satırları böyle karışık gösteren.

Sayfa yüklendiğinde

Kaçtane afiş göstermek istiyorsanı karşısına sayısını yazın örn : var kacTane = 9 ;
ama burada iki yerde kacTane değişkeni tanımlayacağız bilginize.

.size fonksiyonu ile kaç tane li tagi var diye soruyoruz ve kaç tane li tagi olduğunu buluyoruz.

Gösterilecek afiş sayısını gosterilecekAfisSayisi değişkenine aktarıyoruz.

Eğer sistemimizde gösterilecek resim sayısından dahada az resim eklenmişse bunu if döngüsü ile belirtip for döngüsü ilede her li’nin style=”” tagına display:block; diyoruz. Eğer resim sayısı bizim gösterilecek sayımızdan yüksek ise yukarıda kacTane adlı değişken ile belirlediğimiz kadar resim gösteriyoruz.

Bu fonksiyon temel fonksiyonumuz burada hangi yön tuşuna basıldığını belirliyor , hangi resimin ekranda gösterildiğini belirliyoruz ve 2 farklı fonksiyonumuz var sol tuşa basıldıysa solaKaydir fonksiyonuna saga tıklayınca sagaKaydir fonksiyonuna gönderiyoruz.

Değişkenleri oluşturuyoruz ve resimlerin sayısını gene alıyoruz.

If ile bir şart oluşturuyoruz eğer sol butona tıklanırsa litaglarında gizli olanları buluyoruz hangi tagların açılacağını bulup afisleriSolaKaydir fonksiyonuna gönderiyoruz.

Eğer sag tuşa basılırsa afisleriSagaKaydir(sayi,kacTane); bu fonksiyona li taglari hakkında bilgi gönderiyoruz.

Bu fonksiyonda afisleri sola sağa kayıdırıyoruz fonskiyon içerisindeki taglar fonksiyonları genel olarak bildiğimiz için anlatmıyorum saten içerinde açıklamalar yazıyor.
bu satırda

Bu fonksiyonda ise afişleri sola kaydırıyoruz.

Js dosyamız bu kadar arkadaşlar genel olarak tagların üstünde altında açıklamalar yaptım ama takıldığınız bir yer olursa direk sorabilirsiniz.

Genel kullanımda ise sadece şunu belirteyim;

Kaç tane resim göstermek istiyorsanız kacTane diye iki yerde aynı değişkeni tanıtım bunun karşısına 5 tane resim göstermek istiyorsanız var kacTane = 5 ; yazın ve 5 tane resim gösterilir.
Css kısmında ise biliyorsunuz ki tasarımcı ruhum yıllar önce kod yazmaya başlayınca bitti güzel bir tasarım yaparsanız benimle paylaşırsanız memnun olurum.