Слайд-шоу JavaScript за допомогою CSS

• Може 5, 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;
максимальна висота: 408 пікселів;
}

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

img # current {
облямівка: 1px суцільний червоний;
фільтр: альфа (непрозорість = 50);
-моз-непрозорість: 0,5;
непрозорість: 0,5;
}

Тут ми бачимо якийсь код, щоб знову обробити відмінності браузера, стандартні виклики для використання елемента непрозорості, але як браузери на основі IE, так і Mozilla ще не підтримують це.

Нарешті, я змінив HTML для ескізів, щоб використовувати стилі та викликати свою функцію. HTML-код мого слайд-шоу зараз виглядає так:









Ми не змінили наш JavaScript, тому слайд-шоу все ще працює, але тепер у нас є більше стилів, і наша презентація відокремлена від нашого HTML та JavaScript. Однак у нас є одна проблема, хоча спочатку вибрана мініатюра є напівпрозорою з червоною облямівкою, вона залишається такою, коли ми змінюємо зображення. Щоб виправити це, нам потрібно повернутися до нашого старого друга JavaScript.

Тут ви можете побачити робочий приклад коду.

Відео Інструкція: Уроки JavaScript Практика #8 Как сделать слайдер (Carousel) (Може 2024).