ссылка на проект:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery

моя работа:

https://github.com/readwalkerchang/imagegallery

Анализ проекта

Галерея изображений, также известная как «лайтбокс», представляет собой общий интерфейс для предварительного просмотра изображений. Но эта оценка от MDN относительно сложна для новичка, который только что изучил базовые манипуляции с прослушивателем событий или обработчиком событий. Эта статья покажет вам мои решения и стратегии.

Эта оценка состоит из трех основных задач:

  1. Зацикливание изображений из папки «изображение», а затем их отображение в виде полного изображения и четырех миниатюрных изображений (панель миниатюр)
  2. Добавьте обработчики событий на миниатюры изображений, которые переключают полное изображение щелчком мыши.
  3. Добавьте обработчики событий на кнопку «затемнить», которые затемняют все изображение с наложением.

Звучит легко? Зацикливание изображений — это кусок пирога, но как их показать — это проблема, над которой вам нужно поработать. Если вы проводите оценку, исходя из предположения, что вы делаете это без изменения файлов .hml и .css, как вы выполняете «Добавление обработчика нажатия на каждое миниатюрное изображение», как описано в инструкции? Вот мои решения:

  • Используйте событие загрузки, чтобы включить все выражения, которые вы собираетесь выполнять на этой странице.
  • Добавьте прослушиватель событий вместо обработчика onclick для каждого изображения.
  • Что касается «кнопки затемнения/осветления», то это единственная более легкая часть.

Полезные методы и стратегии

  • При загрузке страницы включите все выражения
  • Я разделил все задачи на три функции, как вы видите
window.addEventListener('load', (event) => {
  loopingImg();
  clickImg();
  darkenImg();
});

циклическое изображение ()

  • Доступ и изменение атрибута src с помощью метода setAttribute
newImage.setAttribute(‘src’, taget)

щелкнуть изображение ()

  • зациклить и добавить прослушиватель событий для обнаружения кликов с помощью метода foreach
  • не забудьте использовать Array.from(elements) для преобразования объекта списка узлов в массив
let elements = document.querySelectorAll('img');
Array.from(elements).forEach(function(element) {
  element.addEventListener('click', function);
});

затемнитьImg();

  • Просто сделайте, как описано в инструкции

Резюме концепции

Функция стрелки

  • Функция со стрелкой – это просто сокращение от традиционной функции, но с ограничениями.
  • Он несовместим с ключевым словом this или другими методами ООП, такими как вызов, применение и привязка.
  • традиционная функция
myfunction function(){…}
  • стрелочная функция
(myfunction) => {…}

нодлист

  • Пока вы используете document.querySelectorAll(), метод документа возвращает список узлов
  • это структура, подобная массиву, но не фактический массив
  • Обязательно конвертируйте нодлист в настоящий массив с помощью Array.from()

для каждого

  • он зацикливает для вас структуру, подобную массиву, но возвращаемое значение «не определено»
  • это означает, что вы можете делать все, что хотите, внутри области видимости функции.

Идеи улучшения

  • Использовать функцию обратного вызова