Jak utworzyć suwak obrazu za pomocą JavaScript
Będąc programistą JavaScript, jeśli zostaniesz poproszony o utworzenie suwaka obrazu dla aplikacji internetowej, szybko pomyślisz o zastosowaniu „wtyczek jQuery”. Te wtyczki są pomocne; Mogą jednak napotkać konflikty kodu z istniejącymi bibliotekami i bibliotekami jQuery. Więc co zrobić w tym scenariuszu? Zamiast używać jQuery, użyj JavaScript i utwórz suwak obrazu bez kłopotów.
Ten zapis nauczy procedury tworzenie jakiś Suwak obrazu W JavaScript. A więc zacznijmy!
Jak utworzyć suwak obrazu za pomocą JavaScript
Aby utworzyć suwak obrazu za pomocą JavaScript, musisz postępować zgodnie z instrukcjami poniżej podania:
Krok 1: Pożądane przesłanie obrazy do folderu projektu.
Krok 2: Dodaj wymagane Elementy HTML do "indeks.html" plik.
Krok 3: Definiować logika W pliku JavaScript.
Krok 4: Ustaw styl dodanego elementu HTML w „styl.CSS" plik.
Zgodnie z wymienionymi krokami przejdziemy teraz procedurę tworzenia suwaka obrazu za pomocą JavaScript.
Notatka: W celu demonstracji używamy kodu Visual Studio. Możesz jednak użyć dowolnego wybranego edytora kodu.
Krok 1: Prześlij żądane obrazy do projektu
W swoim projekcie utwórz nowy folder o nazwie „obrazy”I dodaj do niego pożądane obrazy, dla których chcesz utworzyć suwak obrazu.
Na przykład w naszym „Suwak obrazu„Folder projektu, stworzyliśmy„obrazy”Folder, a następnie dodał do niego trzy obrazy:„IMG1.jpg”,„IMG2.jpg", I "IMG3.jpg”:
Krok 2: Dodaj wymagane elementy HTML do „indeksu.plik html ”
W "indeks.html”Plik dodamy kontener„obrazy-Slideshow" używając "”Tag. Ten pojemnik jest dalej podzielony na trzy sekcje slajdów obrazów.
Wraz z określonymi slajdami obrazów dodamy również dwa symbole HTML za pomocą „„Tag kotwiczny. „„<„Symbol zabierze nas do„poprzedni„Zsuń się, podczas gdy drugi symbol„>”Slaj się do„Następny" obraz:
❮
❯
Oto jak nasze „indeks.html„Plik wygląda jak:
Krok 3: Zdefiniuj logikę w pliku JavaScript
Musimy zdefiniować logikę w „projekt.JS”Plik w taki sposób, że gdy suwak obrazu zostanie załadowany po raz pierwszy, pokazuje pierwszy obraz na suwaku. Następnie pozwala nam poruszać się między slajdami, wykorzystując następne i poprzednie symbole HTML.
Aby to zrobić, po pierwsze, ustawimy „1”Jak„ „CurrentIndex”Z slajdów i przekazać je„wyświetlaczeLides ()”Funkcja:
var currentIndex = 1;wyświetlaczeLides (currentIndex);
„„wyświetlaczeLides ()”Funkcja akceptuje„CurrentIndex„Wartość jako argument”num". W pierwszym etapie ta funkcja pobiera wszystkie elementy o nazwie klasy „obrazy".
Następnie dodamy „Jeśli" stan "num> slajdy.długość”To sprawdza, czy wartość„num„Argument jest większy niż długość slajdów”3". Zauważ, że „num„Wartość odnosi się do„CurrentIndex”Z slajdów. W przypadku, gdy określony warunek oceni jako „Prawda”,„CurrentIndex„Suwaka zostanie ustawione na„1". Ten warunek zostanie zastosowany w sytuacji, w której wyświetlany jest ostatni obraz (slajd 3), a użytkownik kliknie „Następny" przycisk. Po tym suwak ustawi „Pierwszy”Obraz (slajd 1) na slajdach.
Podobnie drugi „Jeśli" stan "num < 1 „Zostanie oceniane jako prawdziwe, gdy pierwszy obraz (slajd 1) zostanie wyświetlony na slajdach, a użytkownik kliknie„poprzedni" przycisk. W tym przypadku wartość „CurrentIndex”Jest ustawiony jako„3”, Który równa suwakowi”długość”, A ostatni obraz (slajd 3) zostanie pokazany na slajdach.
Ponadto, gdy wybierany jest slajd do wyświetlania za pomocą jego „CurrentIndex”, Wyświetlanie stylu pozostałych dwóch slajdów zostanie ustawione na„nic”:
funkcja wyświetla sięSLides (num)var x;
var slides = dokument.getEntsByClassName („ImagesLides”);
if (num> slajdy.długość) currentIndex = 1
if (num < 1) currentIndex = slides.length
dla (x = 0; x < slides.length; x++)
slajdy [x].styl.display = "none";
slajdy [currentIndex - 1].styl.display = "blok";
Na suwak obrazu, po kliknięciu (Następny) „>„Symbol HTML”, „1”Jest przekazywany jako argument„setSlides ()”Funkcja, która oznacza, że suwak musi przejść do następnego slajdu. W tym celu „setSlides ()”Wywołuje„wyświetlaczeLides ()”Funkcja podczas przekazywania„currentIndex += num„Jako argument. Ta operacja wzrośnie „1" w "CurrentIndex„Wartość, a następnie pokaż ten konkretny obraz na pokaz slajdów.
W drugim przypadku, kiedy (poprzedni) "<„Symbol jest klikany, a„-1„Wartość jest przekazywana do„wyświetlaczeLides ()„Metoda wyświetlania poprzedniego obrazu na suwak:
funkcja setslides (num)wyświetlaczeLides (currentIndex += num);
Krok 4: Ustaw styl dodanego elementu HTML w „Style.plik CSS ”
Następnie dodaj poniższy kod w „styl.CSS”Plik do określenia stylu dodanych elementów HTML:
.ImagesLidesNie wyświetla się
img
Margines: Auto;
Blok wyświetlacza;
szerokość: 100%;
/ * Nasz główny kontener obrazów-Slideshow */
.Images-Slideshow
maksymalna szerokość: 612px;
Pozycja: względny;
Margines: Auto;
/*Styl dla ">" Dalej i "<" previous buttons */
.suwak-btn
Kursor: wskaźnik;
Pozycja: absolutna;
TOP: 50%;
szerokość: auto;
Wyściółka: 8px 16px;
margines: -22px;
Kolor: RGB (0, 0, 0);
Font-Weight: Bold;
Rozmiar czcionki: 18px;
Przejście: 0.6s łatwość;
Radiusz graniczny: 0 3px 3px 0;
User-Select: Brak;
kolor tła: RGBA (255, 255, 255, 0.5);
Radiusz graniczny: 50%;
/ * Ustawienie pozycji poprzedniego przycisku w kierunku lewej */
.poprzedni
Po lewej: 2%;
/ * Ustawienie pozycji następnego przycisku w prawo */
.Następny
Racja: 2%;
/ * Na zawisie, dodając kolor tła */
.Poprzedni: Hover,
.Dalej: Hover
Kolor: RGB (255, 253, 253);
kolor tła: RGBA (0, 0, 0, 0.8);
Po zapisaniu dodanego kodu, otwórz „indeks.html”Plik w przeglądarce i sprawdź działanie utworzonego suwaka obrazu:
Chodziło o tworzenie podstawowego suwaka obrazu za pomocą JavaScript. Możesz dalej badać, aby dodać pewne różnice w suwaku obrazu.
Wniosek
Zamiast korzystać z wtyczek jQuery, tworzenie Slider obrazu za pomocą JavaScript jest uważany za jedną z najlepszych opcji. Wdrożenie zajmuje mniej czasu i nie zapewnia żadnych błędów ani konfliktów. Suwak obrazu sprawia, że strona internetowa jest bardziej innowacyjna i przyciąga uwagę użytkowników. W tym zapisie omówiono procedurę utworzenia suwaka obrazu w JavaScript.