Pokaz slajdów JavaScript z funkcjami

• Może 13, 2024

W poprzednich artykułach stworzyliśmy i dopracowaliśmy bardzo prosty pokaz slajdów JavaScript. Ten pokaz slajdów jest w pełni funkcjonalny, a nawet wyświetla coś odpowiedniego dla osób, które nie mają JavaScript, ale chciałbym, aby miniatura obrazu, który aktualnie wyświetlam, wyglądała inaczej niż inne miniatury. Skorzystałem z identyfikatora CSS o nazwie „bieżący”, który sprawił, że obrazy były półprzezroczyste i dodał cienką czerwoną ramkę dla wybranej miniatury. W ostatnim artykule uzyskałem takie zachowanie dla początkowo wybranej miniatury, ale kiedy wybrałem nową miniaturę, nowa miniatura nie zmieniła się, a początkowa miniatura zachowała wybrany styl.

W poprzedniej wersji mojego pokazu slajdów, gdy użytkownik kliknie miniaturę, wyświetlane są powiązane duże obrazy. Chcę to zrobić, aby zmienić duży obraz, ustawić miniaturę wcześniej wybranego obrazu, aby powrócić do normalnego wyglądu i sprawić, by ta miniatura była wyświetlana w specjalnym stylu dla wybranego obrazu. Ponieważ teraz robię wiele rzeczy po kliknięciu miniatury, przełączyłem się z umieszczania całego mojego kodu w atrybucie onClick img znacznik przy użyciu funkcji. Funkcje JavaScript zwykle działają w głowa sekcja HTML, aby były ładowane i gotowe po załadowaniu treści strony. Można je wstawić bezpośrednio między scenariusz tagi lub put i plik i dołączone. W przypadku krótkich programów lub gdy aktywnie koduję, łatwiej jest mi umieścić kod bezpośrednio na stronie, tak jak tutaj.

Mógłbym użyć funkcji dla każdej miniatury, ale ponieważ wszystko, co zmienia się z miniatury do miniatury, to nazwa obrazu i identyfikator miniatury (i użyłem nazwy obrazu dla id), napisałem jedną funkcję, która wzięła id jako argument i użył go do stworzenia odpowiedniej nazwy obrazu poprzez dodanie do niego „.jpg”. Nazwałem swoją funkcję displayLarge.

funkcja displayLarge (id) {
// zmień duży obraz
imageName = id + ".jpg";
document.getElementById ("largeImage"). src = imageName;
// przywróć styl poprzedniej miniatury do domyślnej
document.getElementById („current”). id = oldID;
// zanotuj identyfikator, zanim go zmienimy
oldID = id
// zaznacz miniaturę jako bieżącą w bieżącym stylu
document.getElementById (id) .id = "current";
}

Aby ta funkcja działała po raz pierwszy, musiałem też podać wstępną definicję oldID, zmienną używam do zapamiętania oryginalnego identyfikatora aktualnie wybranej miniatury. Cały ten kod znajduje się w sekcji nagłówka strony internetowej, więc jest ładowany przed załadowaniem strony.

Na koniec zmieniłem kod HTML miniaturek, aby wywoływał moją funkcję. HTML mojego pokazu slajdów wygląda teraz tak:











Tutaj możesz zobaczyć działający przykład tego kodu.

Instrukcje Wideo: Kurs JavaScript odc. 2: Mechanika działania skryptów: uchwyty, funkcje, zdarzenia (Może 2024).