Weblabor

Miért nem játszik a jQuery? Ha valami más keretrendszert használsz, akkor mi az? Ez azért elég nagy feladat, hogy valaki pusziért megcsinálja neked, főleg ha NEKED kellene megvalósítani. Valamilyen keretrendszer mindenképp jól fog jönni, legalább az események kezelésére és az animációra. Érdemes a Carousel szóra keresni, szerintem azzal jobb találatokat fogsz kapni a témára.

De ahogy én csinálnám:

Egy doboz, ami overflow: hidden. Abban van egy lista (OL ill. UL, kinek mi a szimpatikus, amiben vannak a képek). A listának adnék egy megfelelően nagy szélességet, mondjuk 32000px, így tutira nem fognak több sorba törni benne a képek. Az LI elemeket pedig float: left-tel pakolnám benne egymás mellé, megfelelő margin-t illetve padding-ot választva. Az egész listát úgy pozicionálnám (position: absolute), hogy az előző és a következő képből látszon még valamennyi. Ezek után a gombok megnyomására az egész elmozdulna (left CSS tulajdonság) annyi pixelt (természetesen valamilyen animáció keretei között), hogy a következő kép legyen a középpontban (ekkor jó szolgálatot tehet, ha minden LI ugyanolyan széles).


Ezek szerint egyáltalán nem kell, vagy nem feltétlenül kell?

A feladvány kapcsán volt egy ötletem, de rájöttem, meghaladja a tudásomat a kivitelezése:
Ha jól értem, a feladat annyi, hogy néhány képet kell megjeleníteni egy csíkban úgy, hogy mozgatni lehessen diafilmszerűen a csíkot.
Úgy képzeltem a kivitelezést, hogy egy külső div fix szélességgel, overflow:hidden attribútummal, benne egy másik div, ami az összes képet tartalmazza, ezért jóval szélesebb, mint a külső. Ennek a belsőnek a relatív pozícióját javascript-ből állítgatnám (hogy mi váltaná ki a pozíció változtatását - kattintás v. csak az egér kurzor megfelelő elem fölé állítása - az most mellékes).

Ez eddig tetszik v. eleve hibás valahol az elmélet?
Ha tetszik, akkor itt a buktató: fogalmam sincs, hogyan lehetne a css-ben megadott poziciót növelni/csökkenteni úgy, hogy az kulturáltnak legyen nevezhető.
Ugyanis az elem.style.left értékét kellene változtatni, de ez string és az aktuális érték mögé oda kell írni a mértékegységét is (pl. elem.style.left="-200px").
Ráadásul, ha nem javascriptből állítom be, akkor nekem null stringet ad vissza a fenti attribútum lekérdezése... :-(

Persze lehet, hogy csak a maximalizmusom áldozata vagyok, mert nem akarok olyan megoldást, hogy kiveszem a style.left értékét, lecsapom a végéről a px-t, növelem/csökkentem valamennyivel, a kapott értékhez hozzácsapom a px-t és visszaírom.


Update: kicsit gányolva bár, de csak összehoztam! :-)
Íme a nagy mű!
Ha szépen megkérem a tisztelt errejárókat, megköpködnétek az alkotásomat? :-)
Ami biztos: FF3.6 és IE9 alatt működni látszik, IE9 compatibility módban biztosan nem megy, ez biztosan hiba, de nem volt türelmem (se tudásom egyelőre), hogy ilyen szinten rendbe tegyem.