JavaScript слайд-шоу с функциями

• April 25, 2024

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

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

Я мог бы использовать функцию для каждой миниатюры, но так как все, что меняется от миниатюры к миниатюре, это имя изображения и идентификатор миниатюры (и я использовал имя изображения для идентификатора), я написал одну функцию, которая приняла id в качестве аргумента и использовал его для создания соответствующего имени изображения, добавив к нему «.jpg». Я назвал свою функцию displayLarge.

function displayLarge (id) {
// меняем большое изображение
imageName = id + ".jpg";
document.getElementById ( "largeImage") SRC = ImageName.
// устанавливаем стиль предыдущего эскиза обратно по умолчанию
. Document.getElementById ( "текущая") ID = oldID;
// запишите id перед тем, как мы изменим его
oldID = идентификатор
// помечаем миниатюру как текущую с текущим стилем
document.getElementById (ID) .id = "текущий";
}

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

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











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

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