suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >So erstellen Sie ein Javascript-Karusselldiagramm

So erstellen Sie ein Javascript-Karusselldiagramm

王林
王林Original
2023-05-09 09:22:061176Durchsuche

Wie erstelle ich ein JavaScript-Karussell?

Mit der Entwicklung der Web-Frontend-Entwicklung sind Karussellbilder zu einem der gemeinsamen Bestandteile der meisten Websites und Anwendungen geworden. Ich glaube jedoch, dass viele Freunde, die neu in der Front-End-Entwicklung sind, fragen werden: Wie erstellt man ein JavaScript-Karusselldiagramm?

Dieser Artikel führt Sie in die Verwendung von JavaScript zum Erstellen eines Karusselldiagramms ein und hilft Ihnen dabei, die Grundprinzipien und gängigen Technologien für die Implementierung von Karusselldiagrammen schrittweise zu verstehen.

1. Grundprinzipien von Karussellbildern

Karussellbilder sind, wie der Name schon sagt, eine Gruppe von Bildern, die in einer Schleife abgespielt werden können. Sie ermöglichen eine automatische Schleife oder einen manuellen Wechsel, sodass Benutzer mehrere Bilder oder Inhalte durchsuchen können .

Das Grundprinzip des Karusselldiagramms besteht aus zwei Teilen: HTML-Struktur und JavaScript-Logik.

HTML-Struktur:

HTML-Struktur ist die Grundlage des Karusselldiagramms. Seine Struktur ist ungefähr wie folgt: 

<div class="carousel">
  <ul class="carousel-list">
    <li class="carousel-item"><img src="image1.jpg" alt="image1"></li>
    <li class="carousel-item"><img src="image2.jpg" alt="image2"></li>
    <li class="carousel-item"><img src="image3.jpg" alt="image3"></li>
    <li class="carousel-item"><img src="image4.jpg" alt="image4"></li>
    <li class="carousel-item"><img src="image5.jpg" alt="image5"></li>
  </ul>
</div>

Unter diesen ist .carousel der Container des Karusselldiagramms und .carousel-list ist der Bildlistencontainer und <code>.carousel-item ist der Container für jedes einzelne Bild. .carousel 是轮播图的容器，.carousel-list 是图片列表容器，.carousel-item 是每个单独图片的容器。

JavaScript逻辑：

JavaScript逻辑实现轮播图的核心，通常采用以下方式：

1、 获取轮播图页面元素，用 JavaScript 代码选中 HTML 中的 .carousel 元素。

var carousel = document.querySelector('.carousel');

2、 获取图片列表容器和单独图片容器，

var list = carousel.querySelector('ul');
var items = carousel.querySelectorAll('.carousel-item');

3、 获取轮播图图片的宽度，

var itemWidth = items[0].offsetWidth;

4、配置切换间隔时间和定时器，

var delay = 3000;
var interval;

5、配置自动播放和手动切换，

function startCarousel() {
    interval = setInterval(function(){
        var left = parseInt(list.style.left) + itemWidth;
        if(left <= itemWidth - list.offsetWidth) {
            list.style.left = "0px";
        } else {
            list.style.left = left + 'px';
        }
    }, delay);
}

function stopCarousel() {
    clearInterval(interval);
}

二、实现简单轮播图

现在，我们已经了解了轮播图的基本原理，并通过代码来实现了轮播图的基本效果。下面，我们将基于这一效果来实现一个简单的轮播图。

HTML结构：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Simple Carousel</title>  
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <div class="carousel">
      <ul class="carousel-list">
        <li class="carousel-item"><img src="img/1.jpg" alt="1"></li>
        <li class="carousel-item"><img src="img/2.jpg" alt="2"></li>
        <li class="carousel-item"><img src="img/3.jpg" alt="3"></li>
        <li class="carousel-item"><img src="img/4.jpg" alt="4"></li>
      </ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

JavaScript代码：

var carousel = document.querySelector('.carousel');
var list = carousel.querySelector('ul');
var items = carousel.querySelectorAll('.carousel-item');
var itemWidth = items[0].offsetWidth; 
var delay = 3000;
var interval;

// 自动播放
function startCarousel() {
    interval = setInterval(function(){
        var left = parseInt(list.style.left) + itemWidth;
        if(left <= itemWidth - list.offsetWidth) {
            list.style.left = "0px";
        } else {
            list.style.left = left + 'px';
        }
    }, delay);
}

// 手动切换
function stopCarousel() {
    clearInterval(interval);
}

// 启动轮播
startCarousel();

CSS代码：

.carousel {
  position: relative;
  overflow: hidden;
  width: 400px;           /* 轮播图容器的宽度 */
  height: 300px;          /* 轮播图容器的高度 */
}
.carousel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  width: ${(items.length * 100)}%;
}
.carousel-item {
  float: left;
  width: calc(100% / ${(items.length)});
}
.carousel-item img {
  display: block;
  width: 100%;
  height: auto;
}

三、实现多种效果的轮播图

通过上面的例子，我们已经学会了如何制作一个简单的轮播图。但是，通常轮播图不仅仅只有以上的效果，我们还可以通过 JavaScript 实现更多实用的轮播图效果。

1、缓动效果

缓动效果就是让每张图片切换时速度由快到慢的效果。通过使用JavaScript通常我们可以像这样写：

function startCarousel() {
    interval = setInterval(function(){
        var left = parseInt(list.style.left) + itemWidth;
        var startTime = Date.now();
        var easing = function(t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        };
        var animate = function() {
            var time = Date.now() - startTime;
            var easingLeft = easing(time, parseInt(list.style.left), -itemWidth, delay);
            if(time <= delay) {
                list.style.left = easingLeft + 'px';
                requestAnimationFrame(animate);
            } else {
                list.style.left = -itemWidth + 'px';
                list.appendChild(items[0]);
            }
        };
        requestAnimationFrame(animate);
    }, delay);
}

2、响应式布局

响应Web设计是现代前端设计的常识，为了使轮播图能够支持不同的屏幕尺寸，更好地适应Web布局，我们需要做些额外的调整和优化。

/* 以vw为基准 */
.carousel {
  position: relative;
  overflow: hidden;
  width: 80vw;         /* 轮播图容器的宽度 */
  height: calc(40vw);  /* 轮播图容器的高度 */
}

/* 以persent为基准 */
.carousel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  width: ${(items.length * 100)}%;
  top: 0;
  left: 0;
  transition: left .3s;
}

.carousel-item {
  float: left;
  width: calc(100% / ${(items.length)});
  height: 100%;
}

/* 调整图片大小 */
.carousel-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

其中，vw

JavaScript-Logik:

JavaScript-Logik implementiert den Kern des Karusselldiagramms, normalerweise auf folgende Weise:

1. Rufen Sie das Karusselldiagramm-Seitenelement ab und verwenden Sie JavaScript-Code, um das .carousel-Element in HTML auszuwählen.

rrreee

2. Holen Sie sich den Bildlistencontainer und den einzelnen Bildcontainer, 🎜rrreee🎜3. Konfigurieren Sie das Umschaltintervall und den Timer, 🎜rrreee🎜5 Wiedergabeschalter, 🎜rrreee🎜 2. Implementieren Sie ein einfaches Karusselldiagramm🎜🎜Jetzt haben wir die Grundprinzipien des Karusselldiagramms verstanden und die grundlegende Wirkung des Karusselldiagramms durch Code implementiert. Im Folgenden implementieren wir ein einfaches Karusselldiagramm, das auf diesem Effekt basiert. 🎜🎜HTML-Struktur: 🎜rrreee🎜JavaScript-Code: 🎜rrreee🎜CSS-Code: 🎜rrreee🎜 3. Karusselldiagramm zur Erzielung mehrerer Effekte🎜🎜Durch das obige Beispiel haben wir gelernt, wie man ein einfaches Karusselldiagramm erstellt. Normalerweise haben Karussellbilder jedoch nicht nur die oben genannten Effekte, wir können durch JavaScript auch praktischere Karussellbildeffekte erzielen. 🎜🎜1. Beschleunigungseffekt🎜🎜Der Beschleunigungseffekt ist der Effekt der Änderung der Geschwindigkeit jedes Bildes von schnell auf langsam. Durch die Verwendung von JavaScript können wir normalerweise so schreiben: 🎜rrreee🎜2. Responsives Layout 🎜🎜Responsives Webdesign ist im modernen Frontend-Design sinnvoll, damit das Karusselldiagramm verschiedene Bildschirmgrößen unterstützen und sich besser an das Web anpassen kann Layout, wir Zusätzliche Anpassungen und Optimierungen sind erforderlich. 🎜rrreee🎜Unter anderem kann die vw-Einheit die Länge als Prozentsatz der Breite des Ansichtsfensters angeben, und das Karussell behält ein reaktionsfähiges Layout bei, unabhängig davon, wie sich die Bildschirmgröße ändert. 🎜🎜4. Zusammenfassung🎜🎜Bisher haben wir die Grundprinzipien und Implementierungsmethoden zum Erstellen von Karussells durch JavaScript verstanden. Durch Anpassungen und Optimierungen können wir mehr Karussellkomponenten mit reichhaltigen Stilen und Effekten implementieren und so die Benutzerbedürfnisse nach Webinhalten und -diensten gut erfüllen. 🎜🎜Natürlich gibt es beim Erstellen von Karussells mit JavaScript noch viele technische Schwierigkeiten und betriebliche Details. Ich hoffe, dass jeder diese Fähigkeiten in der tatsächlichen Entwicklung nach und nach beherrschen und seine Programmierfähigkeiten kontinuierlich verbessern kann. 🎜

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

JavaScript css html 循环
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：CSS-Schriftart ausgeblendetNächster Artikel：CSS-Schriftart ausgeblendet

In Verbindung stehende Artikel

Mehr sehen