Banner v CSS

Střídání obrázků se v CSS zařídit nedá. V praxi je nutno použít jeden z těchto způsobů:

- obrázky vložit do flashe a místo obrázku do stránky vložit ten flash.
- obrázky vložit do animovaného gifu a do stránky vložit ten gif. Umějí to některé grafické programy (z hlavy nevím, už jsem to dlouho nedělal). Kvalita gifu bývá ale kvůli berevnému omezení mizerná na to, aby se tak střídaly nějaké krásné fotky.
- použít javascript, který bude obrázky střídat. Protože jde o relativně poptávané řešení, už hodně lidí to napsalo. Dá se to dohledat pod názvem carousel. Takže doporučuji třeba googlit [carousel javascript] nebo tak něco.

V CSS lze od Exploreru 10 použít animaci.
V HTML lze od Exploreru 3 použít <marquee>.

Konkrétní řešení, která by šlo použít i pro tento případ, jsme probírali před časem v tématu Odpočet na web?.

Dotaz na Google CSS 3 timer without JS vrátí docela dost výsledků, nemám s tím ale zkušenost a nepočítám s podporou ve většině aktuálně používaných prohlížečů.

Zdá se, že marquee až tak k zahození nemusí být; ukázka: 1, 2, 3. :-)

(Je docela kumšt najít zde na diskusi obrázek, který by se dal použí(va)t na výrobu ukázek. :-)

Petr ZZZ:
„Zdá se, že marquee až tak k zahození nemusí být“
Má to nějaké mouchy ;-)
http://kod.djpw.cz/msb

margin:
Myslíš tu prodlevu, kdy není vidět nic? Zkusil jsem ji vyřešit přidáním divu s pozadím (viz druhá ukázka), ale nějak se to cuká, jako kdyby výpočet pozadí jel jinak než výpočet marquee (IE 10).

Kromě toho je tam problém s tím, že je-li stejné pozadí jako (dejme tomu poloviční, viz druhá ukázka) část marquee, je jeden stav vidět dvě třetiny doby a druhý jen třetinu, místo aby to bylo půl na půl. Hezké by to mohlo být např. tehdy, pokud bude záměrem zobrazit tři stavy. Jeden by byl na pozadí a druhé dva přes marquee. I tak je ale otázka, zda ta prodleva není chybou prohlížeče – budoucí prohlížeče ji můžou vyřešit a začne to fungovat jinak, než autor původně zamýšlel.

Takže to asi fakt má mouchy. :-/