So erstellen Sie ein HTML-Karussellbild-Front-End-Fragen und Antworten-php.cn

So erstellen Sie ein HTML-Karussellbild

WBOY

Freigeben： 2023-05-06 13:13:07

Original

4780 Leute haben es durchsucht

Mit der rasanten Entwicklung des Internets wird die Website-Erstellung immer beliebter und Karussellbilder sind ein sehr häufiges Website-Element, das die Website lebendiger und lebendiger erscheinen lässt. Wie implementiert man ein einfaches HTML-Karussell? mal sehen.

Fügen Sie zunächst im neuen HTML-Dokument eine .css-Datei und eine .js-Datei im Kopf ein, erstellen Sie ein neues div im Körper und fügen Sie Klassen- und ID-Attribute hinzu.

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="slider" id="slider">
    <!--轮播图内容-->
  </div>
</body>

Nach dem Login kopieren

Als nächstes legen Sie den Stil des Karussells in der .css-Datei fest. Am Beispiel des 1000×500-Karussellbilds müssen Sie die Größe und Position des Karussellbilds sowie die Breite und Höhe des Bilds festlegen. Außerdem müssen Sie die Anfangsposition und die Animationsänderungszeit des Bilds festlegen im Karussellbild.

.slider {
  width: 1000px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border: 2px solid #ddd;
}

.slider img {
  width: 1000px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 500ms ease-in-out;
}

.slider img.active {
  opacity: 1;
  z-index: 1;
}

Nach dem Login kopieren

Fügen Sie in der .js-Datei den Karussellcode hinzu. Definieren Sie zunächst eine Variable, um das aktuell angezeigte Bild zu verfolgen. Stellen Sie dann einen Timer ein, um nach 5000 ms zum nächsten Bild zu wechseln. Aktualisieren Sie abschließend die Klasse des aktuellen Bilds, sodass das aktuelle Bild zur aktiven Klasse hinzugefügt wird, wodurch sich seine Deckkraft ändert.

var slider = document.getElementById("slider");
var images = slider.getElementsByTagName("img");

var counter = 0;

setInterval(function() {
  images[counter].classList.remove("active");
  counter++;
  if (counter == images.length) {
    counter = 0;
  }
  images[counter].classList.add("active");
}, 5000);

Nach dem Login kopieren

Abschließend müssen Sie nur noch das Bildelement im Slider-Div hinzufügen, wie unten gezeigt:

<div class="slider" id="slider">
  <img src="img1.jpg" class="active">
  <img src="img2.jpg">
  <img src="img3.jpg">
</div>

Nach dem Login kopieren

Dies ist der Prozess der Implementierung eines einfachen HTML-Karussellbilds. Als häufig verwendetes Element auf Websites können Karussellbilder nicht nur das visuelle Erlebnis der Website verbessern, sondern auch das Benutzererlebnis der Website verbessern. Beginnen Sie mit der Erstellung Ihres eigenen Karussells!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein HTML-Karussellbild. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!