Как да създадете слайдшоу с помощта на CSS и HTML, друга свободна практика блог
Как да създадете слайдшоу с помощта на CSS и HTML
Какво ще правим
Ние ще създадем една проста слайдшоу с четири раздела отдясно и отляво на основната картина. Когато кликнете върху един от разделите отдясно ще се появи новото изображение. Вижте как ще изглежда в крайна сметка, това е възможно тук.
Подгответе изображения
На теория тя работи е съвсем проста. Ние ще използваме тагове един, да се премине от едно изображение в друго. Това е много подобна на връзката "нагоре", който превърта страницата на върха, от клика. Единствената разлика е, че изображенията ще преминете в DIV на контейнера. вместо да превъртате нагоре и надолу на страницата.
HTML кодът, само по себе си, е много проста. Що се отнася до разделите, това е просто списък с водещи символи, с изображения във вътрешността на анкерни тагове. Всички отворени изображения затворени в Разделение (това е много важно, защото ние се скрие всички ненужни изображения чрез преливане. И показва само на избраното изображение). В допълнение, всяка картина е също затворена в Разделение и в маркера за котва. Тези Разделение и могат да бъдат използвани като контейнери, в случай, че искате да използвате фоново изображение вместо обичайните снимките, те наистина не са необходими в този пример, ние просто ще ги напусне, ако промените мнението си.
Това трябва да бъде такава HTML:
С CSS, ние ще конфигурира разделите, така че те са разположени от лявата страна на главния прозорец и се поставят една върху друга. Ние също така се създаде 40% разделите за прозрачност в нормално състояние, както и 100% -prozrachnost на курсора на мишката. Разбира се, най-важната част на СГО се отнася до г Разделение съдържа. Ние просто трябва да се уверите, че преливане собственост настроен на скрито.
Това трябва да бъде такава СГО:
Практика
Последното нещо, което трябва да направите, е да се свържете с HTML и CSS. Разбира се, можете да промените външния вид на слайд шоу, а броят на разделите. Най-важното нещо, което трябва да се помни, в това ръководство - идеята за използване на котва маркер като смяна на изображението означава.
Това е начина, кодът изглежда, се събра: