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

• Може 9, 2024

У попередніх статтях ми створили і виконали детальну настройку на дуже простому слайд-шоу JavaScript. Це слайд-шоу є повністю функціональним і навіть відображає щось підходяще для людей, які не мають JavaScript, але я хотів би, щоб мініатюра зображення, яке я наразі показую, виглядало відмінним від інших ескізів. Я зупинився на використанні ідентифікатора CSS під назвою "current", який зробив зображення напівпрозорими та додав до обраної ескізу тонку червону облямівку. У моїй останній статті я дістався такої поведінки для початково вибраного мініатюру, але коли я вибрав нову мініатюру, нова ескіз не змінилася, а початкова ескіз зберегла вибраний стиль.

У попередній версії мого слайд-шоу, коли користувач натискає на мініатюру, відображаються пов'язані великі зображення. Я хочу це зробити, щоб змінити велике зображення, встановити мініатюру попередньо вибраного зображення, щоб він повернувся до нормального та зробив цей мініатюрний екран із спеціальним стилем для вибраного зображення. Оскільки я зараз займаюся кількома речами, коли клацніть мініатюру, я перейшов від введення всього свого коду в атрибут onClick img тег до використання функції. Функції JavaScript зазвичай працюють у керівник розділ HTML, щоб вони були завантажені та готові під час завантаження тіла сторінки. Вони можуть бути вставлені безпосередньо між ними сценарій теги або put і файл і включені. Для коротких програм або коли я активно кодую, мені простіше помістити свій код прямо на сторінку, як я це робив тут.

Я міг би використовувати функцію для кожної ескізу, але оскільки все, що змінюється від мініатюри до мініатюри - це ім'я зображення та ідентифікатор ескізу (і я використовував ім'я зображення для ідентифікатора), я написав одну функцію, яка взяла id як аргумент і використовував його для створення відповідного імені зображення, додавши до нього ".jpg". Я назвав свою функцію displayLarge.

функція displayLarge (id) {
// змінити велике зображення
imageName = id + ".jpg";
document.getElementById ("LargeImage"). src = imageName;
// поверне стиль попереднього мініатюру назад до типового
document.getElementById ("поточний"). id = oldID;
// занотуйте ідентифікатор, перш ніж ми його змінимо
oldID = ід
// позначте мініатюру актуальною для поточного стилю
document.getElementById (id) .id = "поточний";
}

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

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











Ви можете побачити робочий приклад цього коду тут.

Відео Інструкція: Слайдшоу на Javascript. Pure Javascript Slideshow (Може 2024).