Wie schreibe ich Javascript-Karussell-Image-JS?

Die Implementierung des JavaScript-Karusselldiagramms kann nativen JavaScript-Code verwenden oder auf einige ausgereifte Bibliotheken von Drittanbietern (z. B. jQuery usw.) verweisen.

Nehmen wir den nativen JavaScript-Code als Beispiel, um die Implementierung eines JavaScript-Karusselldiagramms vorzustellen.

Schritt eins: HTML-Struktur

Zuerst müssen wir die Struktur des Karussells in HTML definieren, einschließlich Bildcontainern, Links- und Rechtspfeilen, Navigationsschaltflächen usw. Zum Beispiel:

<div class="slider-container">
  <div class="slider-wrapper">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <div class="slider-prev"></div>
  <div class="slider-next"></div>
  <div class="slider-dots">
    <span class="slider-dot"></span>
    <span class="slider-dot"></span>
    <span class="slider-dot"></span>
  </div>
</div>

wobei slider-container是轮播图的容器，slider-wrapper是图片容器，slider-prev和slider-next是左右箭头，slider-dots和slider-dot die Navigationsschaltfläche ist.

Schritt 2: CSS-Stil

Als nächstes müssen wir den Stil für das Karussellbild festlegen, einschließlich der Breite, Höhe, Position usw. des Containers, des Layouts und der Größe des Bildes sowie des Stils der Navigationsschaltfläche , usw.

.slider-container {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.slider-wrapper {
  position: absolute;
  width: 2400px;
  height: 400px;
  left: 0;
  top: 0;
}

.slider-wrapper img {
  float: left;
  width: 800px;
  height: 400px;
}

.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background-image: url("arrow.png");
  background-repeat: no-repeat;
  background-size: 40px auto;
  cursor: pointer;
}

.slider-prev {
  left: 20px;
  transform: rotate(180deg);
}

.slider-next {
  right: 20px;
}

.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-dot {
  display: inline-block;
  margin: 0 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.slider-dot.active {
  background-color: #f90;
}

Die oben genannten sind einige einfache Beispielstile. Natürlich können die spezifischen Stile an Ihre Bedürfnisse angepasst werden.

Schritt drei: JavaScript-Code

Jetzt beginnen Sie mit dem Schreiben von JavaScript-Code, um den Effekt des Karussells zu erzielen. Wir müssen zuerst die Referenz jedes Elements abrufen, zum Beispiel:

var container = document.querySelector('.slider-container');
var wrapper = document.querySelector('.slider-wrapper');
var prev = document.querySelector('.slider-prev');
var next = document.querySelector('.slider-next');
var dots = document.querySelectorAll('.slider-dot');

Dann müssen wir einige Parameter und Variablen festlegen, zum Beispiel:

var index = 0;  // 当前图片的索引
var interval = 3000;  // 切换时间间隔（3秒）
var timer = null;  // 定时器

Als nächstes müssen wir einige Funktionen schreiben, um die Grundfunktionen des Karussells zu implementieren :

Bilder wechseln:

function changeImage() {
  wrapper.style.transform = 'translateX(-' + index * 800 + 'px)';
  for (var i = 0; i < dots.length; i++) {
    dots[i].classList.remove(&#39;active&#39;);
  }
  dots[index].classList.add(&#39;active&#39;);
}

Automatische Umschaltung:

function autoPlay() {
  timer = setInterval(function() {
    index++;
    if (index >= dots.length) {
      index = 0;
    }
    changeImage();
  }, interval);
}

Automatische Umschaltung stoppen:

function stopAutoPlay() {
  clearInterval(timer);
}

Klickereignis der Navigationsschaltfläche verarbeiten:

for (var i = 0; i < dots.length; i++) {
  dots[i].addEventListener(&#39;click&#39;, function() {
    index = this.getAttribute(&#39;data-index&#39;);
    changeImage();
    stopAutoPlay();
  });
}

Klickereignis der linken und rechten Pfeile verarbeiten:

prev.addEventListener('click', function() {
  index--;
  if (index < 0) {
    index = dots.length - 1;
  }
  changeImage();
  stopAutoPlay();
});

next.addEventListener(&#39;click&#39;, function() {
  index++;
  if (index >= dots.length) {
    index = 0;
  }
  changeImage();
  stopAutoPlay();
});

Schließlich starten wir den automatischen Wechsel, nachdem die Seite geladen wurde:

window.addEventListener('load', function() {
  autoPlay();
});

Zusammenfassend sind dies die Schritte zum Implementieren eines einfachen JavaScript-Karusselldiagramms. Natürlich können weitere Funktionen je nach Bedarf erweitert werden, wie z. B. Ein- und Ausblendeffekte, Lazy Loading, responsives Layout usw.

Das obige ist der detaillierte Inhalt vonWie schreibe ich Javascript-Karussell-Image-JS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!