Erstellen eines automatischen Karussells: JavaScript-Implementierungsleitfaden

Dieser Artikel soll Entwicklern dabei helfen, ein automatisches Karusselldiagramm zu erstellen, um das Problem des manuellen Umschaltens und der automatischen Wiedergabe zu lösen. Wir stellen vollständige HTML-, CSS- und JavaScript-Codebeispiele zur Verfügung und erläutern die Implementierung im Detail, um sicherzustellen, dass auch JavaScript-Neulinge problemlos damit umgehen können. Der Schwerpunkt liegt auf dem Verständnis, wie JavaScript die automatische Umschaltung und die manuelle Steuerungslogik des Karussells steuert und wie man CSS-Stile optimiert, um einen reibungslosen Übergangseffekt zu erzielen.

HTML-Struktur

Die HTML-Struktur des Karussells umfasst hauptsächlich die folgenden Teile:

• Container-Slider-Banner : Enthält alle Elemente des gesamten Karussells.
• Linke und rechte Pfeiltasten slider-button_left und slider-button_right : werden zum manuellen Wechseln von Bildern verwendet.
• Bildcontainer-Sliderbox : Enthält alle Karussellbilder.
• Bildelement sliderbox_image : Jedes Element enthält ein Bild.
• Anzeigeschaltflächen slider-selectors_buttons : Wird verwendet, um das aktuell angezeigte Bild anzuzeigen und dem Benutzer zu ermöglichen, direkt zu einem bestimmten Bild zu springen.

 <div class="slider-banners">
  <button class="slider-button_left" style="left: 30px;"><i class="fa-solid fa-angle-left" style="font-size: 30px; color: #ffffff;"></i></button>
  <div class="sliderbox">
    <div class="sliderbox_image active"><img  src="/static/imghw/default1.png" data-src="img/Slider/BannerStore1.jpg" class="lazy" alt="Erstellen eines automatischen Karussells: JavaScript-Implementierungsleitfaden" ></div>
    <div class="sliderbox_image"><img  src="/static/imghw/default1.png" data-src="img/Slider/BannerStore2.jpg" class="lazy" alt="Erstellen eines automatischen Karussells: JavaScript-Implementierungsleitfaden" ></div>
    <div class="sliderbox_image"><img  src="/static/imghw/default1.png" data-src="img/Slider/BannerStore3.jpg" class="lazy" alt="Erstellen eines automatischen Karussells: JavaScript-Implementierungsleitfaden" ></div>
    <div class="sliderbox_image"><img  src="/static/imghw/default1.png" data-src="img/Slider/BannerStore4.jpg" class="lazy" alt="Erstellen eines automatischen Karussells: JavaScript-Implementierungsleitfaden" ></div>
    <div class="sliderbox_image"><img  src="/static/imghw/default1.png" data-src="img/Slider/BannerStore5.jpg" class="lazy" alt="Erstellen eines automatischen Karussells: JavaScript-Implementierungsleitfaden" ></div>
    <div class="sliderbox_image"><img  src="/static/imghw/default1.png" data-src="img/Slider/BannerStore6.jpg" class="lazy" alt="Erstellen eines automatischen Karussells: JavaScript-Implementierungsleitfaden" ></div>
    <div class="sliderbox_image"><img  src="/static/imghw/default1.png" data-src="img/Slider/BannerStore7.jpg" class="lazy" alt="Erstellen eines automatischen Karussells: JavaScript-Implementierungsleitfaden" ></div>
    <div class="sliderbox_image"><img  src="/static/imghw/default1.png" data-src="img/Slider/BannerStore8.jpg" class="lazy" alt="Erstellen eines automatischen Karussells: JavaScript-Implementierungsleitfaden" ></div>
  </div>
  <button class="slider-button_right" style="right: 30px;"><i class="fa-solid fa-angle-right" style="font-size: 30px; color: #ffffff;"></i></button>
  <ul class="slider-selectors_buttons">
    <li class="active">
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
  </ul>
</div>
<script src="https://kit.fontawesome.com/6b2cfcf1a5.js" crossorigin="anonymous"></script>

CSS-Stile

CSS-Stile werden hauptsächlich zur Steuerung des Layouts, des Erscheinungsbilds und der Animationseffekte von Karussells verwendet. Hier sind einige wichtige CSS-Stile:

• .sliderbox: Position festlegen: relativ und Überlauf: ausgeblendet, um sicherzustellen, dass das Bild ausgeblendet wird, wenn es den Container überschreitet.
• .sliderbox_image: Verwenden Sie position: absolute, um alle Bilder zusammenzustapeln und das Anzeigen und Ausblenden von Bildern durch Deckkraft zu steuern.
• .sliderbox_image.active: Deckkraft: 1 und Position: relativ festlegen, um das aktuelle Bild anzuzeigen.
• .sliderbox_image.inactive: Wird verwendet, um beim Umschalten das vorherige Bild (Deckkraft: 1) anzuzeigen und diese Klasse dann über JavaScript zu entfernen.
• .slider-selectors_buttons: Layout und Stil für Anzeigeschaltflächen.

 * {
  Boxgröße: border-box;
  Rand: 0;
  Polsterung: 0;
}

Körper {
  Schriftfamilie: „Times New Roman“, Times, Serif;
  Hintergrundfarbe: #4d4d4d;
  Rand: 0;
  Polsterung: 0;
}

.slider-banners {
  Anzeige: Flex;
  rechtfertigen-Inhalt: Mitte;
  Höhe: automatisch;
  Breite: 100 %;
  Position: relativ;
}

.sliderbox {
  Position: relativ;
  Höhe: 380px;
  Breite: 100 %;
  Textausrichtung: Mitte;
  Überlauf: versteckt;
}

.sliderbox_image {
  Position: absolut;
  Anzeige: Flex;
  align-items: center;
  rechtfertigen-Inhalt: Mitte;
  Höhe: automatisch;
  Breite: 100 %;
  Deckkraft: 0;
}

.sliderbox_image.inactive {
  Deckkraft: 1;
}

.sliderbox_image.active {
  Deckkraft: 1;
  Position: relativ;
}

.slider_image img {
  Breite: 100 %;
  Höhe: automatisch;
  Textausrichtung: Mitte;
}

.slider-button_left,
.slider-button_right {
  Position: absolut;
  Anzeige: Block;
  Polsterung: 8px;
  Hintergrundfarbe: #66323129;
  align-self: center;
  Grenze: keine;
  Randradius: 5px;
  Übergang: 0,4 s Leichtigkeit;
  Z-Index: 1000;
  Cursor: Zeiger;
}

.slider-button_left:hover,
.slider-button_right:hover {
  Hintergrundfarbe: #663231f0;
  transform: TranslateX(2px);
  Polsterung: 10px;
}

.slider-selectors_buttons {
  Anzeige: Flex;
  Breite: 100 %;
  Position: absolut;
  Listenstil: keiner;
  unten: -30px;
  justify-content: space-evenly;
}

.slider-selectors_buttons li {
  Breite: 15px;
  Höhe: 15px;
  Randradius: 50 %;
  Rand: 1 Pixel einfarbig schwarz;
}

.slider-selectors_buttons li.active {
  Hintergrundfarbe: schwarz;
}

.dissable-s {
  Breite: 20px;
  Höhe: 20px;
  Randradius: 50 %;
  Rand: 15px 5px;
  Cursor: Zeiger;
  Hintergrundfarbe: #66323129;
  Rahmenfarbe: #000000a0;
}

.dissable-s:hover {
  Hintergrundfarbe: #663231f0;
  Rahmenfarbe: #000000cb;
}

.active-s {
  Breite: 20px;
  Höhe: 20px;
  Randradius: 50 %;
  Rand: 15px 5px;
  Cursor: Zeiger;
  Hintergrundfarbe: #f47b3e;
  Rahmenfarbe: #000000cb;
}

JavaScript-Implementierung

Der JavaScript-Code ist für die Realisierung der automatischen Wiedergabe, des manuellen Umschaltens und der Verknüpfung der Anzeigetasten des Karussells verantwortlich.

1. DOM-Elemente abrufen : Rufen Sie zunächst alle DOM-Elemente ab, die bedient werden müssen, einschließlich Container, Bilder, Schaltflächen und Indikatoren.
2. Initialisierung : Legen Sie den Anfangszustand fest, z. B. den aktuell angezeigten Bildindex.
3. Autoplay : Verwenden Sie die setTimeout-Funktion, um Bilder regelmäßig zu wechseln.
4. Manuelles Umschalten : Fügen Sie Ereignis-Listener für die Pfeiltasten nach links und rechts hinzu, um beim Klicken zum vorherigen oder nächsten Bild zu wechseln.
5. Indikatorschaltfläche : Fügen Sie einen Ereignis-Listener für jede Indikatorschaltfläche hinzu und wechseln Sie beim Klicken zum entsprechenden Bild.
6. Bildumschaltfunktion playSlide(slide) : Diese Funktion ist der Kern und für die Aktualisierung des Anzeigestatus des Bildes und des Aktivierungsstatus der Anzeigetaste verantwortlich.

 let sliderBanners = document.querySelector(".slider-banners"),
  dots = document.querySelectorAll(".slider-selectors_buttons li"),
  sliderContent = document.querySelectorAll(".slider-banners .sliderbox_image"),
  leftArrow = document.querySelector(".slider-button_left"),
  rightArrow = document.querySelector(".slider-button_right"),
  sliderSpeed ​​​​= 4500,
  currentSlide = 0,
  currentActive = 0,
  sliderTimer;

window.onload = function() {
  Funktion playSlide(slide) {
    for (let i = 0; i  sliderContent.length - 1) {
      slide = currentSlide = 0;
    }
    if (currentActive != currentSlide) {
      sliderContent[currentActive].classList.add("inactive");
    }
    sliderContent[slide].classList.add("active");
    dots[slide].classList.add("active");
    currentActive = currentSlide;

    clearTimeout(sliderTimer);
    sliderTimer = setTimeout(function() {
      playSlide((currentSlide = 1));
    }, sliderSpeed);
  }
  leftArrow.addEventListener("click", () => {
    playSlide((currentSlide -= 1));
  });
  rightArrow.addEventListener("click", () => {
    playSlide((currentSlide = 1));
  });
  for (let j = 0; j  {
      playSlide((currentSlide = dots.indexOf(this)));
    });
  }
  playSlide(currentSlide);
};

Dinge zu beachten

• Bildpfad : Stellen Sie sicher, dass der Bildpfad korrekt ist, da das Karussell das Bild sonst nicht anzeigen kann.
• CSS-Stile : CSS-Stile sind für das Erscheinungsbild und die Animation des Karussells von entscheidender Bedeutung. Passen Sie sie daher nach Bedarf an.
• JavaScript-Code : JavaScript-Code ist der Kern des Karussells und muss sorgfältig überprüft werden, um festzustellen, ob die Logik korrekt ist.
• Leistungsoptimierung : Wenn das Karussell eine große Anzahl von Bildern enthält, können Sie Techniken wie das verzögerte Laden von Bildern in Betracht ziehen, um die Leistung zu optimieren.

Zusammenfassen

Mit diesem Tutorial sollten Sie in der Lage sein, ein einfaches automatisches Karussell zu erstellen. Sie können die Funktionen und Stile des Karussells nach Ihren eigenen Bedürfnissen weiter erweitern und optimieren. Sie können beispielsweise Übergangsanimationen hinzufügen, Anzeigestile anpassen, Touch-Sliding unterstützen usw. Denken Sie daran, dass das Verständnis der HTML-Struktur, der CSS-Stile und der JavaScript-Logik die Grundlage für die Erstellung jeder Webanwendung ist.

Das obige ist der detaillierte Inhalt vonErstellen eines automatischen Karussells: JavaScript-Implementierungsleitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!