Wie mache ich ein Karussell mit JQuery?

Mit der Beliebtheit mobiler Geräte sind Karussells zu einem häufigen Merkmal vieler Websites und Anwendungen geworden. jQuery ist eine weit verbreitete JavaScript-Bibliothek, die viele praktische und praktische Methoden bietet und die Entwicklung von Karussells sehr einfach und unkompliziert macht.

Die folgenden Schritte zeigen Ihnen, wie Sie mit jQuery ein einfaches Karusselldiagramm erstellen. Zuerst müssen wir einige grundlegende HTML- und CSS-Codes vorbereiten.

HTML-Code

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="image1.jpg" alt="Slide 1"></div>
    <div class="slide"><img src="image2.jpg" alt="Slide 2"></div>
    <div class="slide"><img src="image3.jpg" alt="Slide 3"></div>
  </div>
  <div class="controls">
    <span class="prev">Previous</span>
    <span class="next">Next</span>
  </div>
</div>

CSS-Code

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

.slides {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 300%;
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.6s ease;
}

.slide {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide img {
  max-height: 100%;
  max-width: 100%;
}

.controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}

.controls span {
  margin: 0 10px;
  cursor: pointer;
}

Im obigen HTML-Code haben wir ein Karussell mit drei Bildern. Bilder werden in img-Tags gespeichert und jedes Bild wird in ein div-Element mit einem slide-Klassennamen eingeschlossen. Die Steuerschaltflächen des Karussells befinden sich unten im Element div und verwenden span mit prev und next Klassennamen Elementdarstellung. img标签中，每张图片被包装在一个具有slide类名的div元素中。轮播图的控制按钮在div元素的底部，并且使用具有prev和next类名的span元素表示。

在CSS代码中，我们将轮播图容器的高度和宽度设置为300px和600px，并且设置overflow: hidden以确保只显示一个div元素。所有的slide元素都有相同的高度，并且使用Flex布局在父元素中进行水平布局。控制按钮居中定位，并且使用Flex布局进行水平对齐。

现在我们可以逐步创建轮播图代码。

第一步，我们需要使用jQuery选择轮播图中的相关元素并存储它们的引用，以便在之后的代码中使用。如下所示：

var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
var $prev = $slider.find('.prev');
var $next = $slider.find('.next');

第二步，我们需要计算每个slide元素的宽度，并将它们排列在一行中。如下所示：

var slideWidth = $slide.width();
$slides.css('width', slideWidth * $slide.length + 'px');

第三步，我们需要编写next和prev函数，以便在点击控制按钮时轮播图可以动起来。这里的具体实现涉及到计算偏移量的复杂数学运算，但是可以使用animate()函数来实现。如下所示：

$next.on('click', function() {
  $slides.animate({left: '-=' + slideWidth}, 600, function() {
    $slides.append($slides.find('.slide:first-of-type'));
    $slides.css('left', '');
  });
});

$prev.on('click', function() {
  $slides.animate({left: '+=' + slideWidth}, 600, function() {
    $slides.prepend($slides.find('.slide:last-of-type'));
    $slides.css('left', '');
  });
});

在第四步中，我们需要设置一个循环定时器，以便每隔一段时间自动运行next

Im CSS-Code legen wir die Höhe und Breite des Karussellcontainers auf 300px und 600px fest und setzen overflow: versteckt auf Make Stellen Sie sicher, dass nur ein div-Element angezeigt wird. Alle slide-Elemente haben die gleiche Höhe und werden im Flex-Layout horizontal innerhalb des übergeordneten Elements angeordnet. Die Steuertasten sind mithilfe des Flex-Layouts zentriert und horizontal ausgerichtet.

Jetzt können wir Schritt für Schritt den Karussellcode erstellen.

Im ersten Schritt müssen wir jQuery verwenden, um relevante Elemente im Karussell auszuwählen und ihre Referenzen für die Verwendung im nachfolgenden Code zu speichern. Wie unten gezeigt:

var interval = setInterval(function() {
  $next.click();
}, 3000);

Im zweiten Schritt müssen wir die Breite jedes slide-Elements berechnen und sie in einer Reihe anordnen. Wie unten gezeigt: 🎜

$slider.on('mouseenter', function() {
  clearInterval(interval);
});

$slider.on('mouseleave', function() {
  interval = setInterval(function() {
    $next.click();
  }, 3000);
});

🎜Im dritten Schritt müssen wir die Funktionen next und prev schreiben, damit sich das Karussellbild bewegen kann, wenn auf die Steuerschaltfläche geklickt wird. Die spezifische Implementierung umfasst hier komplexe mathematische Operationen zur Berechnung des Offsets, kann jedoch mithilfe der Funktion animate() erreicht werden. Wie unten gezeigt: 🎜

var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
var $prev = $slider.find('.prev');
var $next = $slider.find('.next');

var slideWidth = $slide.width();
$slides.css('width', slideWidth * $slide.length + 'px');

$next.on('click', function() {
  $slides.animate({left: '-=' + slideWidth}, 600, function() {
    $slides.append($slides.find('.slide:first-of-type'));
    $slides.css('left', '');
  });
});

$prev.on('click', function() {
  $slides.animate({left: '+=' + slideWidth}, 600, function() {
    $slides.prepend($slides.find('.slide:last-of-type'));
    $slides.css('left', '');
  });
});

var interval = setInterval(function() {
  $next.click();
}, 3000);

$slider.on('mouseenter', function() {
  clearInterval(interval);
});

$slider.on('mouseleave', function() {
  interval = setInterval(function() {
    $next.click();
  }, 3000);
});

🎜Im vierten Schritt müssen wir einen Schleifentimer einrichten, um die Funktion next von Zeit zu Zeit automatisch auszuführen. Wie unten gezeigt: 🎜rrreee🎜Der letzte Schritt besteht darin, dem Benutzer zu verbieten, auf die Steuerschaltfläche zu klicken, während sich das Karussellbild bewegt, um Animationsüberlappungen und Karussellfehler zu verhindern. Wie unten gezeigt: 🎜rrreee🎜Jetzt haben wir ein einfaches Karusselldiagramm fertiggestellt. Das gesamte Code-Snippet sieht so aus: 🎜rrreee🎜Nach Abschluss der oben genannten Schritte können Sie das Erscheinungsbild und die Funktionalität des Karussells mithilfe Ihrer eigenen CSS-Stile und HTML-Codes anpassen und es nahtlos in Ihre Website integrieren. 🎜

Das obige ist der detaillierte Inhalt vonWie mache ich ein Karussell mit JQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!