Wie schreibe ich Javascript-Karussell-Image-JS?-Front-End-Fragen und Antworten-php.cn

Wie schreibe ich Javascript-Karussell-Image-JS?

PHPz

Freigeben： 2023-04-24 14:42:14

Original

865 Leute haben es durchsucht

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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');

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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;);
}

Nach dem Login kopieren

Automatische Umschaltung:

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

Nach dem Login kopieren

Automatische Umschaltung stoppen:

function stopAutoPlay() {
  clearInterval(timer);
}

Nach dem Login kopieren

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();
  });
}

Nach dem Login kopieren

Klickereignis der linken und rechten Pfeile verarbeiten:

prev.addEventListener(&#39;click&#39;, 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();
});

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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!