Слайд-шоу JavaScript с CSS

• May 3, 2024

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

Сначала я преобразовал свой существующий стиль в CSS. Если вы не знакомы с CSS, самый простой способ начать экспериментировать с ним - поместить его между стиль теги в заголовке вашего HTML-документа. Первоначальный тег требует атрибут типа, чтобы сообщить браузеру, какой тип информации о стиле вы используете, поэтому он должен выглядеть следующим образом:



Первоначальное преобразование в CSS было простым, поскольку только большое изображение имело информацию о стилях, и оно уже имело Я бы атрибут, который использовался в целях JavaScript.

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

Ранее я не включал информацию о размерах для миниатюр, но я добавил класс под названием превью и установите теги изображений в этом классе, чтобы установить размер 40 на 40 пикселей. Это означает, что даже если я случайно загрузлю изображения, которые слишком велики или малы для миниатюр, они будут вынуждены отображаться в размере миниатюр.

img.thumbs {
граница: нет;
ширина: 40 пикселей;
высота: 40 пикселей;
}

Я также добавил слайд-шоу класс для хранения всего слайд-шоу. Это позволит мне, например, добавить границу или изменить цвет фона для всего слайд-шоу, если я захочу. На данный момент я использую его только для установки максимальной высоты для высоты большого изображения, потому что, когда я добавляю больше миниатюр, я хочу, чтобы они оставались на стороне большого изображения, а не двигались над ним. К сожалению, Internet Explorer не поддерживает атрибут max-height, поэтому мне все еще придется работать над этим вопросом позже.

.slideshow {
высота: 408 пикселей;
максимальная высота: 408 пикселей;
}

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

IMG # ток {
граница: 1px сплошной красный;
Фильтр: альфа (непрозрачность = 50);
-moz-непрозрачность: 0,5;
непрозрачность: 0,5;
}

Здесь мы видим некоторый код для обработки различий в браузерах, стандартный вызов для использования элемента opacity, но браузеры на базе IE и Mozilla пока не поддерживают это.

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









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

Вы можете увидеть рабочий пример кода до сих пор здесь.

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