JavaScript слайдшоу с CSS

• Може 1, 2024

В предишна статия създадохме много просто слайдшоу на JavaScript. Това слайдшоу е напълно функционално и дори показва нещо подходящо за хора, които нямат JavaScript, но не разполага с всички функции, които бих искал да имам за моя уебсайт. По-конкретно, бих искал миниатюрата на изображението, което в момента показвам, да изглежда по различен начин от другите миниатюри. Тъй като стиловете са добър начин за постигане на това, ще започна с преобразуването на всички атрибути в съществуващия ми HTML в CSS.

Първо преобразих съществуващия си стил, за да използвам CSS. Ако не сте запознати с CSS, най-лесният начин да започнете да експериментирате с него е да го поставите между стил тагове в главата на вашия HTML документ. Първоначалният маркер се нуждае от атрибут тип, за да каже на браузъра какъв тип информация за стил, който използвате, така че трябва да изглежда така:



Първоначалната конверсия в CSS беше лесна, тъй като само голямото изображение имаше информация за стилистиката и тя вече имаше документ за самоличност атрибут, който се използва за целите на JavaScript.

#largeImage {
рамка: 2px плътно черно;
ширина: 544px;
височина: 408px;
}

Преди не бях включвал информация за оразмеряване на миниатюрите, но добавих клас, наречен палците и задайте маркери за изображения от този клас, за да зададете размера на 40px с 40px. Това означава, че дори случайно да заредя изображения, които са твърде големи или малки за миниатюри, те ще бъдат принудени да се показват в размер на миниатюра.

img.thumbs {
граница: няма;
ширина: 40px;
височина: 40px;
}

Добавих и a слайдшоу клас, за да държи цялото слайдшоу. Това ще ми позволи да правя неща като добавяне на рамка или промяна на фоновия цвят за цялото слайдшоу, ако желая. В този момент аз го използвам само за да настроя максималната височина спрямо височината на голямото изображение, защото когато добавя още миниатюри, искам те да останат отстрани на голямото изображение, вместо да се движат над него. За съжаление, Internet Explorer не поддържа атрибута max-height, така че все пак ще трябва да работя по този въпрос по-късно.

.slideshow {
височина: 408px;
максимална височина: 408px;
}

Накрая създадох стил за избраната миниатюра. Реших, че искам избраната от мен миниатюра да е полупрозрачна и да има тясна червена рамка. Тъй като в даден момент ще бъде избрано само едно изображение, реших да използвам идентификатор, наречен "текущ" за тази цел. Предимството на използването на CSS е, че мога да променя как ще изглежда по всяко време, без да променя кода. Стилът изглежда така:

IMG # ток {
рамка: 1px плътно червено;
филтър: алфа (непрозрачност = 50);
-moz-непрозрачност: 0.5;
непрозрачност: 0,5;
}

Тук виждаме някакъв код за справяне с разликите в браузъра, стандартните обаждания за използване на непрозрачен елемент, но както IE, така и базирани на Mozilla браузъри все още не го поддържат.

Накрая промених HTML кода за миниатюрите, за да използвам стиловете и да извикам функцията си. HTML за слайдшоуто ми сега изглежда така:









Не сме променили JavaScript, така че слайдшоуто все още работи, но сега имаме повече стайлинг и презентацията ни е отделена от нашия HTML и JavaScript. Имаме обаче един проблем, докато първоначално избраната миниатюра е полупрозрачна с червена рамка, тя остава така, когато сменяме изображенията. За да коригираме това, трябва да се върнем към нашия стар приятел JavaScript.

Тук можете да видите работещ пример на кода.

Инструкции Видео: Как сделать слайд-шоу из фотографий | HTML & CSS | Без JavaScript (Може 2024).