JavaScript Slide Show with CSS

• Może 21, 2024

W poprzednim artykule stworzyliśmy bardzo prosty pokaz slajdów JavaScript. Ten pokaz slajdów jest całkowicie funkcjonalny, a nawet wyświetla coś odpowiedniego dla osób, które nie mają JavaScript, ale nie ma wszystkich funkcji, które chciałbym mieć dla mojej witryny. W szczególności chciałbym, aby miniatura obrazu, który obecnie wyświetlam, wyglądała inaczej niż inne miniatury. Ponieważ style są dobrym sposobem na osiągnięcie tego, zacznę od konwersji wszystkich atrybutów w moim istniejącym HTML na CSS.

Najpierw przekonwertowałem istniejący styl na CSS. Jeśli nie znasz CSS, najprostszym sposobem na rozpoczęcie eksperymentowania z nim jest umieszczenie go pomiędzy styl tagi w nagłówku dokumentu HTML. Tag początkowy potrzebuje atrybutu type, aby poinformować przeglądarkę, jakiego rodzaju informacji o stylu używasz, więc powinien on wyglądać następująco:



Początkowa konwersja do CSS była łatwa, ponieważ tylko duży obraz zawierał informacje o stylu, a już miał ID atrybut, który był używany do celów JavaScript.

#largeImage {
obramowanie: 2px jednolity czarny;
szerokość: 544px;
wysokość: 408 pikseli;
}

Nie dołączałem wcześniej informacji o rozmiarze miniatur, ale dodałem klasę o nazwie kciuki i ustaw tagi graficzne w tej klasie, aby ustawić rozmiar na 40 x 40 pikseli. Oznacza to, że nawet jeśli przypadkowo załaduję obrazy, które są zbyt duże lub małe dla miniatur, będą zmuszone do wyświetlenia w rozmiarze miniatur.

img.thumbs {
granica: brak;
szerokość: 40px;
wysokość: 40px;
}

Dodałem również pokaz slajdów klasa, aby zatrzymać cały pokaz slajdów. Pozwoli mi to zrobić takie rzeczy, jak dodanie ramki lub zmiana koloru tła dla całego pokazu slajdów, jeśli chcę. W tym momencie używam go tylko do ustawiania maksymalnej wysokości do wysokości dużego obrazu, ponieważ gdy dodam więcej miniatur, chcę, aby pozostały one z boku dużego obrazu zamiast przesuwać się nad nim. Niestety, Internet Explorer nie obsługuje atrybutu max-height, więc będę musiał później popracować nad tym problemem.

. pokaz slajdów {
wysokość: 408 pikseli;
maksymalna wysokość: 408px;
}

Wreszcie stworzyłem styl dla wybranej miniatury. Zdecydowałem, że chcę, aby wybrana miniatura była półprzezroczysta i miała wąską czerwoną ramkę. Ponieważ jednocześnie wybierane będzie tylko jedno zdjęcie, postanowiłem użyć do tego celu identyfikatora o nazwie „bieżący”. Zaletą korzystania z CSS jest to, że mogę zmienić wygląd w dowolnym momencie bez zmiany kodu. Styl wygląda następująco:

img # current {
obramowanie: jednolity czerwony 1px;
filtr: alfa (nieprzezroczystość = 50);
-moz-krycie: 0,5;
krycie: 0,5;
}

Widzimy tutaj kod do obsługi różnic w przeglądarkach, standardowe wezwania do używania elementu nieprzezroczystości, ale przeglądarki oparte na IE i Mozilli jeszcze tego nie obsługują.

Na koniec zmieniłem HTML miniatur, aby używać stylów i wywoływać moją funkcję. HTML mojego pokazu slajdów wygląda teraz tak:









Nie zmieniliśmy naszego JavaScript, więc pokaz slajdów nadal działa, ale teraz mamy więcej stylizacji, a nasza prezentacja jest oddzielona od HTML i JavaScript. Mamy jednak jeden problem, podczas gdy początkowo wybrana miniatura jest półprzezroczysta z czerwoną ramką, pozostaje taka sama, gdy zmieniamy obrazy. Aby to naprawić, musimy wrócić do naszego starego znajomego JavaScript.

Do tej pory możesz zobaczyć działający przykład kodu.

Instrukcje Wideo: How To Create An Image Slider In HTML, CSS & Javascript (Może 2024).