Hogyan hozzunk létre egy körforgalom, kizárólag HTML és CSS nélkül javascript!
A projektek dolgoztunk együtt, egy körhinta. Mi volt ötlete, hogyan tehetjük ezt a munkát, a CSS-animációk és átalakítás tulajdonság, de ez ad a karusszel görgetése automatikus és nem teszi lehetővé a felhasználói input, hogy anyu nem kellett. Egy kis gondolkodás, úgy döntöttünk, hogy az abszolút helymeghatározás és a: cél ál-, hogy megváltoztassa a z-index és átlátszóságát a körhinta, hogy ciklikusan rajtuk keresztül.
Hozzunk létre egy ilyen dolog!
A szerkezet a mi karusszel néz ki: van egy fő div.carousel-wrapper, ami a méretet körhinta. Belül a héj, van span.hidden célzott elemek egyedi azonosítókat jár célpontjai körhinta ellenőrzési pontok és div.carousel tételes elemek, amelyek mindegyikének tartalmát a karusszel terméket.
Mindegyik div.carousel-elem elem lesz tartalom, és két hivatkozás, a.arrow-dok és a.arrow-next, amit használni a ciklus elemei között a körhinta.
Mivel az egyéni karusszel elemek position: absolute (tudjuk tenni őket egymás tetejére), akkor be kell állítani a magasságot div.carousel-wrapper kézzel. Fogunk próbálja oldani a CSS a külső stíluslapok, de néhány pontot fogunk írni, hogy a mi körhinta használat és skálázható.
Mi is használjuk CSS, hogy állítsa be a háttérképet, a mi két div.carousel tételes elemeket, hogy azok az élénk, de mi hagyjuk alább látni a jelölés volt olvasható.
Ez az egész HTML. Meglepően egyszerű. A CSS (SCSS, ebben az esetben), ez az, ahol a varázslat történik.
Van egy körforgalom, amely teljesen működőképes, és 100% -os áll HTML és CSS! Létrehoztunk egy körhinta három elemet tartalmaz, de ha továbbra is hozzá elemeket, ügyeljen arra, hogy még több célsejteket és megkötik a linkek rendesen.
Nagy konverziók!
FIGYELEM! Ön egy elavult böngészőt használ Internet Explorer
Ez a weboldal épül a fejlett, korszerű technológiák és nem támogatja az Internet Explorer a második és a hetedik változat.
