suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >So erstellen Sie ein HTML-Karussellbild

So erstellen Sie ein HTML-Karussellbild

WBOY
WBOYOriginal
2023-05-06 13:13:074772Durchsuche

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>

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

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

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Kann das HTML-Anzeigeprogramm gelöscht werden?Nächster Artikel：Kann das HTML-Anzeigeprogramm gelöscht werden?

In Verbindung stehende Artikel

Mehr sehen