Напълно отзивчив; Мобилен и настолен компютър; Навигация с бутони, колелца и докосване.
Това е втора фаза на двуфазен проект, в който изграждаме напълно адаптивна въртележка с изображения за мобилни устройства и настолни компютри.
Първа фаза може да бъде намерена тук.
Разгледайте нашите курсове за обучение.
Имаме 4 големи задачи под ръка.
- ТЪЧ навигация.
- Навигация с БУТОНИ.
- WHEEL навигация.
- Функция за връщане назад.
Основата за ЦЯЛАТА навигация е тази част от кода тук:
for (let i = 0; i < images.children.length; i++) {
updated_position = last_positions[i] + difference;
images.children[i].style.left = `${updated_position}px`;
last_positions[i] = updated_position;
}
Това, което казва, е следното:
Вземете текущата позиция на всички изображения — къде са те по оста X?; добавете някаква разлика, която ще ги премести на нова позиция.
Имаме масив last_positions, за да следим къде са нашите изображения на екрана.
Нека кодираме TOUCH навигацията.
Загрижени сме за три слушатели на събития с докосване.
- ’touchstart’ — Когато потребителят за първи път докосне въртележката, ние записваме X-координатата в променлива.
- ‘touchmove’ — Когато потребителят премести пръста си през тази въртележка, ние изчисляваме разликата между текущата X-координата и записаната X-координата в стъпка 1.
- ’touchend’ — Когато потребителят пусне пръста си от въртележката, извикваме функция за повторно подравняване на нашата въртележка или SNAP, нашата въртележка обратно към активна карта.
Така че разликата в този случай би била:
const current_touch_position = event.changedTouches[0].screenX; difference = current_touch_position — start_touch_position;
Нека кодираме навигацията с БУТОНИ.
Много просто.
Преместваме изображенията наляво или надясно една цяла ширина на картата.
Това прави нашата разлика просто равна на ширината на една карта.
…
difference = new_width;
updated_position = last_positions[i] + difference;
images.children[i].style.transitionDuration = ‘0.5s’;
images.children[i].style.left = `${updated_position}px`;
last_positions[i] = updated_position;
Нека кодираме навигацията WHEEL.
Отново, много просто.
DeltaY на нашето колело на мишката ни дава „разстоянието“ (наистина промяна в Y-координатата), което потребителят е превъртял.
Това прави нашата разлика просто равна на това колко далеч потребителят превърта нагоре или надолу.
…
difference = event.deltaY;
updated_position = last_positions[i] — difference;
images.children[i].style.left = `${updated_position}px`;
last_positions[i] = updated_position;
Функцията SNAP-BACK е малко сложна.
Мисълта зад това е следната:
Нашата точка на прихващане е лявата граница на нашия изглед.
Която и x-стойност на изображението да е най-близка до тази точка, става нашето активно изображение.
Ние изчисляваме необходимите пиксели, за да преместим нашето активно изображение до тази точка и да преместим всички изображения с това количество.
В резултат нашата въртележка се центрира отново.
Има много по-фини точки за завършване на този Ultimate JavaScript Image Slider.
Вижте видео урока по-долу за много по-подробни инструкции.
Можете да получите изходните файлове тук.
Ако желаете по-задълбочено ръководство, вижте моя пълен видео урок в YouTube, Обектът е A.
