Heim > Artikel > Web-Frontend > So erstellen Sie ein automatisch scrollendes Karussell mit HTML, CSS und jQuery

So erstellen Sie ein automatisch scrollendes Karussell mit HTML, CSS und jQuery

WBOYOriginal: 2023-10-24 08:37:581296Durchsuche

Mit der Entwicklung des Internets sind Karussells zu einem der häufigsten und notwendigen Elemente im Webdesign geworden. Durch die Verwendung von Karussells auf Website-Homepages oder Produktanzeigeseiten können mehrere Bilder oder Inhalte anschaulich angezeigt werden, wodurch die Aufmerksamkeit der Benutzer erregt und die Benutzererfahrung verbessert wird. In diesem Artikel wird erläutert, wie Sie mit HTML, CSS und jQuery ein automatisch scrollendes Karusselldiagramm erstellen, und es werden konkrete Codebeispiele bereitgestellt, die für Anfänger hilfreich sein sollen.

Zuerst müssen wir die Grundstruktur des Karussells in der HTML-Datei festlegen. Das Folgende ist ein einfaches HTML-Codebeispiel:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>自动滚动轮播图</title>
  <style>
    .slider {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative;
    }
    .slider .slides {
      width: 300%;
      height: 100%;
      display: flex;
    }
    .slider .slides .slide {
      width: 33.33%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="slider">
    <div class="slides">
      <div class="slide">
        <img src="slide1.jpg" alt="Slide 1">
      </div>
      <div class="slide">
        <img src="slide2.jpg" alt="Slide 2">
      </div>
      <div class="slide">
        <img src="slide3.jpg" alt="Slide 3">
      </div>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Im obigen Code haben wir einen Karussellcontainer mit dem Namen .slider erstellt und die Breite des Containers auf 600 Pixel und die Höhe auf 400 Pixel festgelegt code>overflow: versteckt, um Inhalte auszublenden, die die Containergröße überschreiten. In der Klasse .slides wird die Containerbreite des Karussellbilds auf 300 % (d. h. das Dreifache der Breite jedes Bilds) festgelegt, indem die Breite von .slide Klasse auf 33,33 % Ordnen Sie die drei Bilder gleichmäßig in einer Reihe an. <code>.slider的轮播图容器，设置了容器的宽度为600px，高度为400px，并设置overflow: hidden来隐藏超出容器大小的内容。在.slides类中设置了轮播图图片的容器宽度为300%（即每张图片宽度的三倍），通过设置.slide类的宽度为33.33%将三张图片均匀地排列在一行内。

接下来，我们需要使用jQuery来实现轮播图的自动滚动效果。我们将代码写在一个名为script.js的外部JavaScript文件中（也可以写在HTML文件内的<script></script>标签中）。下面是一个简单的jQuery代码示例：

$(document).ready(function() {
  var slideCount = $('.slide').length;
  var slideWidth = $('.slide').width();
  var slideHeight = $('.slide').height();
  var slideContainerWidth = slideCount * slideWidth;
  
  $('.slides').css({ width: slideContainerWidth, marginLeft: -slideWidth });
  
  function slideNext() {
    $('.slides').animate({
      left: -slideWidth
    }, 1000, function() {
      $('.slide:first-child').appendTo('.slides');
      $('.slides').css('left', '');
    });
  }
  
  setInterval(slideNext, 2000);
});

在上述代码中，我们首先使用$(document).ready()方法来确保页面加载完成后执行代码。然后，我们获取轮播图的总数量、图片宽度、图片高度以及轮播图容器的宽度。通过设置.slides的宽度为slideContainerWidth并将其marginLeft属性设置为-slideWidth，我们将第一张图片的一部分隐藏在容器之外。

接下来，我们定义一个名为slideNext()的函数来实现轮播图的滚动效果。使用.animate()方法，我们将.slides向左移动一个slideWidth的距离，持续时间为1000毫秒（即1秒）。当动画完成后，我们将第一张图片移动到.slides的末尾，并将.slides的left属性重置为空。这样就实现了图片的无缝滚动效果。

最后，我们使用setInterval()函数来循环执行slideNext()

Als nächstes müssen wir jQuery verwenden, um den automatischen Scrolleffekt des Karussells zu erzielen. Wir schreiben den Code in eine externe JavaScript-Datei namens script.js (er kann auch in das Tag <script></script> innerhalb der HTML-Datei geschrieben werden). Hier ist ein einfaches jQuery-Codebeispiel:

rrreee

Im obigen Code verwenden wir zunächst die Methode $(document).ready(), um sicherzustellen, dass der Code nach dem Laden der Seite ausgeführt wird. Dann erhalten wir die Gesamtzahl der Karussellbilder, die Bildbreite, die Bildhöhe und die Breite des Karussellbildcontainers. Indem wir die Breite von .slides auf slideContainerWidth und seine marginLeft-Eigenschaft auf -slideWidth festlegen, verbergen wir einen Teil des ersten Bildes im Container außerhalb . 🎜🎜Als nächstes definieren wir eine Funktion namens slideNext(), um den Scrolleffekt des Karussells zu implementieren. Mit der Methode .animate() verschieben wir .slides eine Distanz von slideWidth nach links für eine Dauer von 1000 Millisekunden (d. h. 1 Sekunde). . Wenn die Animation abgeschlossen ist, verschieben wir das erste Bild an das Ende von .slides und setzen die linke Eigenschaft von .slides auf leer zurück. Dadurch wird ein nahtloser Scrolleffekt für Bilder erreicht. 🎜🎜Schließlich verwenden wir die Funktion setInterval(), um die Funktion slideNext() zu durchlaufen und alle 2 Sekunden zu scrollen. 🎜🎜Mit dem obigen Code können Sie ein Karussell mit automatischem Scrolleffekt erstellen und ausführen. Sie können die Größe, die Anzahl der Bilder und die Scrollgeschwindigkeit des Karussell-Containers nach Bedarf anpassen. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, den Umgang mit HTML, CSS und jQuery zum Erstellen von Karussells zu erlernen! 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein automatisch scrollendes Karussell mit HTML, CSS und jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery css html 循环 JS overflow

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：So erstellen Sie eine Sticky-Top-Navigation mit HTML, CSS und jQueryNächster Artikel：So erstellen Sie eine Sticky-Top-Navigation mit HTML, CSS und jQuery

In Verbindung stehende Artikel

Mehr sehen