So erzielen Sie mit CSS einen einfachen Bildwechseleffekt-Front-End-Fragen und Antworten-php.cn

So erzielen Sie mit CSS einen einfachen Bildwechseleffekt

PHPz

Freigeben： 2023-04-21 13:51:31

Original

3097 Leute haben es durchsucht

CSS ist eine der wichtigsten Technologien in der Frontend-Entwicklung und kann verschiedene Stile und Animationen erzielen. Unter diesen ist auch das Wechseln von Bildern eine häufige Anforderung, z. B. bei Website-Karussells, Folien usw. In diesem Artikel werde ich vorstellen, wie man mit CSS einen einfachen Bildwechseleffekt erzielt.

1. HTML-Struktur

Zuerst müssen wir der Webseite Bilder hinzufügen und ihnen verschiedene IDs oder Klassen zuweisen. Das Folgende ist ein Beispielcode:

<div class="slider">
  <img id="img1" src="image1.jpg" alt="Image 1">
  <img id="img2" src="image2.jpg" alt="Image 2">
  <img id="img3" src="image3.jpg" alt="Image 3">
</div>

Nach dem Login kopieren

Wie Sie sehen können, verwenden wir class="slider" im <div>-Tag, um die Verwendung zu erleichtern des CSS-Auswahlcontainers, um die darin enthaltenen Elemente zu bearbeiten. Die Attribute ID und src im Tag <img> geben die eindeutige Kennung bzw. den Quellpfad des Bildes an. <div>标签中使用了class="slider"，这是为了方便使用CSS选择器来操作它里面的元素。<img>标签中的ID和src属性分别指定了图片的唯一标识和来源路径。

二、CSS样式

接下来，我们需要为每个图片设置CSS样式，并利用CSS选择器来切换它们。以下是一个示例代码：

.slider {
  position: relative;
  height: 400px;
  width: 600px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slider img:first-child {
  opacity: 1;
}

.slider img.active {
  opacity: 1;
}

Nach dem Login kopieren

首先，我们为class="slider"的<div>标签设置了一些基本样式，包括高度、宽度和隐藏溢出内容。接下来，我们为每个图片设置样式：绝对定位、透明度为0、过渡效果等。其中，.slider img:first-child选择器表示第一个图片为活动状态，即显示在网页上。

三、JS交互

最后，我们需要为网页添加JavaScript交互，实现图片的切换。以下是一个示例代码：

var currentImg = 1;
var totalImg = $(".slider img").length;

function changeImg() {
  setInterval(function() {
    currentImg++;
    if (currentImg > totalImg) {
      currentImg = 1;
    }
    $(".slider img").removeClass("active");
    $("#img"+currentImg).addClass("active");
  }, 5000);
}

$(document).ready(function() {
  changeImg();
});

Nach dem Login kopieren

这段代码的作用是定义一个变量currentImg表示当前图片，以及一个变量totalImg表示图片总数。然后，使用setInterval函数来间隔一定时间（本例中为5秒）调用changeImg函数。在该函数中，首先更新当前图片并判断是否超过总数，然后使用CSS选择器移除所有图片的active类名并为当前图片添加该类名。最后，在网页加载时调用changeImg

2. CSS-Stile

Als nächstes müssen wir CSS-Stile für jedes Bild festlegen und CSS-Selektoren verwenden, um sie zu wechseln. Hier ist ein Beispielcode:

<div class="slider">
  <img id="img1" src="https://source.unsplash.com/random/600x400" alt="Image 1">
  <img id="img2" src="https://source.unsplash.com/random/600x401" alt="Image 2">
  <img id="img3" src="https://source.unsplash.com/random/600x402" alt="Image 3">
</div>

Nach dem Login kopieren

Zuerst legen wir einige grundlegende Stile für das <div>-Tag des class="slider" fest, einschließlich Höhe, Breite und versteckter Überlaufinhalt. Als nächstes legen wir Stile für jedes Bild fest: absolute Positionierung, Transparenz von 0, Übergangseffekte usw. Unter diesen gibt der Selektor .slider img:first-child an, dass das erste Bild aktiv ist, also auf der Webseite angezeigt wird.

3. JS-Interaktion

Schließlich müssen wir der Webseite eine JavaScript-Interaktion hinzufügen, um einen Bildwechsel zu erreichen. Das Folgende ist ein Beispielcode:

.slider {
  position: relative;
  height: 400px;
  width: 600px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slider img:first-child {
  opacity: 1;
}

.slider img.active {
  opacity: 1;
}

Nach dem Login kopieren

Der Zweck dieses Codes besteht darin, eine Variable currentImg zur Darstellung des aktuellen Bildes und eine Variable totalImg zur Darstellung der Gesamtzahl zu definieren von Bildern. Verwenden Sie dann die Funktion setInterval, um die Funktion changeImg in einem bestimmten Intervall (in diesem Fall 5 Sekunden) aufzurufen. Aktualisieren Sie in dieser Funktion zunächst das aktuelle Bild und ermitteln Sie, ob die Gesamtzahl überschritten wurde. Entfernen Sie dann mithilfe des CSS-Selektors den aktiven-Klassennamen aller Bilder und fügen Sie den Klassennamen zum aktuellen Bild hinzu. Rufen Sie abschließend die Funktion changeImg auf, wenn die Webseite geladen wird, um den Bildwechsel zu starten.

4. Effektanzeige

Nach den oben genannten drei Schritten können wir einen einfachen Bildwechseleffekt erzielen. Als Referenz wird hier ein Demonstrationseffekt bereitgestellt. 🎜🎜HTML-Code: 🎜

var currentImg = 1;
var totalImg = $(".slider img").length;

function changeImg() {
  setInterval(function() {
    currentImg++;
    if (currentImg > totalImg) {
      currentImg = 1;
    }
    $(".slider img").removeClass("active");
    $("#img"+currentImg).addClass("active");
  }, 5000);
}

$(document).ready(function() {
  changeImg();
});

Nach dem Login kopieren

🎜CSS-Code: 🎜rrreee🎜JS-Code: 🎜rrreee🎜Effektanzeige: https://codepen.io/fangzhou/pen/oQJNEN🎜🎜Zusammenfassend lässt sich sagen, dass die Verwendung von CSS nicht schwierig ist Um einen Bildwechseleffekt zu erzielen, müssen Sie lediglich einige Grundkenntnisse und Fähigkeiten beherrschen. Natürlich kann die tatsächliche Entwicklung komplexere Situationen umfassen, die kontinuierliches Lernen und Üben erfordern. 🎜

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS einen einfachen Bildwechseleffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!