Implementieren Sie den Bildwechsel mit Javascript-Front-End-Fragen und Antworten-php.cn

Implementieren Sie den Bildwechsel mit Javascript

WBOY

Freigeben： 2023-05-27 10:55:38

Original

2150 Leute haben es durchsucht

Mit der Entwicklung von Internetanwendungen sind die Schönheit und Interaktivität von Websites zu wichtigen Faktoren für die Besucheranziehung geworden. Im Webdesign ist der Einsatz von Bildern unverzichtbar. Das Einrichten eines Bildübergangseffekts auf Ihrer Seite ist eine großartige Möglichkeit, die Aufmerksamkeit des Benutzers zu erregen. In diesem Artikel verwenden wir JavaScript, um einen einfachen Bildwechseleffekt zu implementieren.

Zuerst müssen wir eine HTML-Datei erstellen. Am Kopf der Datei können wir Verweise auf CSS-Stile und JavaScript-Skripte hinzufügen. Erstellen Sie innerhalb des Body-Tags ein div-Element, um unser Bild zu umschließen. Wie unten gezeigt:

<!DOCTYPE HTML>
<html>
<head>
  <title>图片切换</title>
  <style type="text/css">
    #img {
      width: 600px;
      height: 400px;
      margin: 0 auto;
      position: relative;
    }
    #img img {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }
    #img img.active {
      opacity: 1;
    }
  </style>
  <script src="img_switch.js"></script>
</head>
<body>
  <div id="img">
    <img src="image1.jpg" class="active" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
    <img src="image4.jpg" />
  </div>
</body>
</html>

Nach dem Login kopieren

Im CSS-Stil legen wir die Breite und Höhe des #img div-Elements fest und definieren die Position des Bildes als relativ. Stellen Sie außerdem die Position jedes Bildes auf „absolut“ ein, damit sie übereinander gestapelt werden können.

Hier verwenden wir das Opazitätsattribut, um die Transparenz des Bildes festzulegen. Die aktive Klasse repräsentiert das aktuell angezeigte Bild. Beim Wechsel zum nächsten Bild setzen wir den Deckkraftwert des aktuell angezeigten Bildes auf 0 und dann den Deckkraftwert des nächsten Bildes auf 1. Dadurch entsteht ein Fade- und Emerging-Effekt.

Als nächstes erstellen wir eine JavaScript-Skriptdatei img_switch.js. Der Code lautet wie folgt:

var i = 0; // 初始化计数器
var images = document.querySelectorAll("#img img"); // 获取所有的图片元素
var len = images.length; // 获取图片的总数

function switchImg() {
  // 隐藏当前展示的图片
  images[i].classList.remove("active");
  // 获取下一个图片的索引位置
  i = (i + 1) % len;
  // 显示下一张图片
  images[i].classList.add("active");
}

// 每隔5秒切换一次图片
setInterval(switchImg, 5000);

Nach dem Login kopieren

In diesem JavaScript-Skript definieren wir zunächst eine Zählervariable i, rufen dann alle Bildelemente ab und speichern sie in den variablen Bildern. Wir definieren auch die Variable len, um die Gesamtzahl der Bilder zu speichern.

In der Funktion switchImg entfernen wir zunächst die aktive Klasse des aktuell angezeigten Bildes, berechnen dann die Indexposition des nächsten Bildes und fügen die aktive Klasse hinzu, um das nächste Bild anzuzeigen. Wir verwenden die Funktion setInterval, um die Funktion switchImg regelmäßig aufzurufen und die Funktion zum automatischen Wechseln von Bildern zu realisieren.

Abschließend verweisen wir auf das JavaScript-Skript in der HTML-Datei, um den automatischen Umschalteffekt auszulösen.

So verwenden Sie JavaScript zum Wechseln von Bildern. Wir können Stile und Skripte nach Bedarf anpassen, um coolere Effekte zu erzielen.

Das obige ist der detaillierte Inhalt vonImplementieren Sie den Bildwechsel mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!