Web-Frontend
js-Tutorial
Bootstrap muss jeden Tag das Karussell-Plug-In erlernen_Javascript-Fähigkeiten
Bootstrap muss jeden Tag das Karussell-Plug-In erlernen_Javascript-Fähigkeiten
Das Bootstrap-Karussell-Plugin ist eine flexible und reaktionsfähige Möglichkeit, Ihrer Website Slider hinzuzufügen. Darüber hinaus ist der Inhalt flexibel genug und kann aus Bildern, Iframes, Videos oder anderen Arten von Inhalten bestehen, die Sie platzieren möchten.
Wenn Sie die Funktionalität dieses Plugins separat referenzieren möchten, müssen Sie auf carousel.js verweisen. Alternativ können Sie, wie im Kapitel Übersicht über das Bootstrap-Plugin erwähnt, auf bootstrap.js oder eine minimierte Version von bootstrap.min.js verweisen.
1. Beispiel
Unten sehen Sie eine einfache Diashow, die das Bootstrap-Karussell-Plugin verwendet, um eine gemeinsame Komponente anzuzeigen, die Elemente in einer Schleife durchführt. Um ein Karussell zu implementieren, müssen Sie lediglich Code mit diesem Tag hinzufügen. Es besteht keine Notwendigkeit, das Datenattribut zu verwenden, sondern nur eine einfache klassenbasierte Entwicklung.
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div id="myCarousel" class="carousel slide"> <!-- 轮播（Carousel）指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active"> <img src="/static/imghw/default1.png" data-src="/media/uploads/2014/07/slide1.png" class="lazy" alt="First slide"> </div> <div class="item"> <img src="/static/imghw/default1.png" data-src="/media/uploads/2014/07/slide2.png" class="lazy" alt="Second slide"> </div> <div class="item"> <img src="/static/imghw/default1.png" data-src="/media/uploads/2014/07/slide3.png" class="lazy" alt="Third slide"> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> </body> </html>
Das Ergebnis sieht so aus:
Einfaches Karussell-Plug-in
2. Optionaler Titel
Sie können einer Folie über das .carousel-caption-Element innerhalb des .item einen Titel hinzufügen. Platzieren Sie einfach optionalen HTML-Code dort und er wird automatisch ausgerichtet und formatiert. Das folgende Beispiel zeigt dies:
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div id="myCarousel" class="carousel slide"> <!-- 轮播（Carousel）指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active"> <img src="/static/imghw/default1.png" data-src="/media/uploads/2014/07/slide1.png" class="lazy" alt="First slide"> <div class="carousel-caption">标题 1</div> </div> <div class="item"> <img src="/static/imghw/default1.png" data-src="/media/uploads/2014/07/slide2.png" class="lazy" alt="Second slide"> <div class="carousel-caption">标题 2</div> </div> <div class="item"> <img src="/static/imghw/default1.png" data-src="/media/uploads/2014/07/slide3.png" class="lazy" alt="Third slide"> <div class="carousel-caption">标题 3</div> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> </body> </html>
Das Ergebnis sieht so aus:
Titel des Karussell-Plugins
3. Verwendung
Über das Datenattribut: Mithilfe des Datenattributs kann die Position des Karussells einfach gesteuert werden.
Das Attribut data-slide akzeptiert die Schlüsselwörter prev oder next, mit denen die Position der Folie relativ zur aktuellen Position geändert wird.
Verwenden Sie data-slide-to, um einen rohen Folienindex an den unteren Rand des Karussells zu verschieben. data-slide-to="2" verschiebt den Schieberegler zu einem bestimmten Index, beginnend bei 0.
Das Attribut data-ride="carousel" wird verwendet, um das Karussell so zu markieren, dass die Animation gestartet wird, wenn die Seite geladen wird.
Über JavaScript: Karussell kann wie folgt manuell über JavaScript aufgerufen werden:
$('.carousel').carousel()
4. Optionen
Einige Optionen werden über Datenattribute oder JavaScript übergeben. Die Optionen sind in der folgenden Tabelle aufgeführt:
5. Methode
Hier sind einige nützliche Methoden im Carousel-Plugin:
6. Beispiele
Das folgende Beispiel demonstriert die Verwendung der Methode:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 轮播（Carousel）插件方法</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"
class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="/static/imghw/default1.png" data-src="/media/uploads/2014/07/slide1.png" class="lazy" alt="First slide">
</div>
<div class="item">
<img src="/static/imghw/default1.png" data-src="/media/uploads/2014/07/slide2.png" class="lazy" alt="Second slide">
</div>
<div class="item">
<img src="/static/imghw/default1.png" data-src="/media/uploads/2014/07/slide3.png" class="lazy" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
<!-- 控制按钮 -->
<div style="text-align:center;">
<input type="button" class="btn start-slide" value="Start">
<input type="button" class="btn pause-slide" value="Pause">
<input type="button" class="btn prev-slide" value="Previous Slide">
<input type="button" class="btn next-slide" value="Next Slide">
<input type="button" class="btn slide-one" value="Slide 1">
<input type="button" class="btn slide-two" value="Slide 2">
<input type="button" class="btn slide-three" value="Slide 3">
</div>
</div>
<script>
$(function(){
// 初始化轮播
$(".start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
// 停止轮播
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
// 循环轮播到上一个项目
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
// 循环轮播到下一个项目
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
// 循环轮播到某个特定的帧
$(".slide-one").click(function(){
$("#myCarousel").carousel(0);
});
$(".slide-two").click(function(){
$("#myCarousel").carousel(1);
});
$(".slide-three").click(function(){
$("#myCarousel").carousel(2);
});
});
</script>
</body>
</html>
Das Ergebnis sieht so aus:
Karussell-Plug-in-Methode
7. Veranstaltungen
In der folgenden Tabelle sind die im Carousel-Plug-in verwendeten Ereignisse aufgeführt. Diese Ereignisse können als Hooks in Funktionen verwendet werden.
Beispiel
Das folgende Beispiel demonstriert die Verwendung von Ereignissen:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 轮播（Carousel）插件事件</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"
class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="/static/imghw/default1.png" data-src="/media/uploads/2014/07/slide1.png" class="lazy" alt="First slide">
</div>
<div class="item">
<img src="/static/imghw/default1.png" data-src="/media/uploads/2014/07/slide2.png" class="lazy" alt="Second slide">
</div>
<div class="item">
<img src="/static/imghw/default1.png" data-src="/media/uploads/2014/07/slide3.png" class="lazy" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
<script>
$(function(){
$('#myCarousel').on('slide.bs.carousel', function () {
alert("当调用 slide 实例方法时立即触发该事件。");
});
});
</script>
</body>
</html>
Das Ergebnis sieht so aus:
Karussell-Plug-in-Event
Ein von Ihnen selbst erstelltes Beispiel gemäß der obigen Anleitung:
Das Karussell-Plug-in dient dazu, mehrere große Bilder derselben Größe der Reihe nach abzuspielen.
//基本实例。 <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="/static/imghw/default1.png" data-src="img/slide1.png" class="lazy" alt="Bootstrap muss jeden Tag das Karussell-Plug-In erlernen_Javascript-Fähigkeiten"> </div> <div class="item"> <img src="/static/imghw/default1.png" data-src="img/slide2.png" class="lazy" alt="第二张"> </div> <div class="item"> <img src="/static/imghw/default1.png" data-src="img/slide3.png" class="lazy" alt="第三张"> </div> </div> <a href="#myCarousel" data-slide="prev" class="carousel-controlleft">‹</a> <a href="#myCarousel" data-slide="next" class="carousel-controlright">›</a> </div>
data 属性解释：
1.data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置；
2.data-slide-to 来向轮播底部创建一个原始滑动索引， data-slide-to="2"将把滑动块移动到一个特定的索引，索引从 0 开始计数。
3.data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放。
如果在 JavaScript 调用就直接使用键值对方法，并去掉 data-；
//设置自定义属性
$('#myCarousel').carousel({
//设置自动播放/2 秒
interval : 2000,
//设置暂停按钮的事件
pause : 'hover',
//只播一次
wrap : false,
});
轮播插件还提供了一些方法，如下：
//点击按钮执行
$('button').on('click', function() {
//点击后，自动播放
$('#myCarousel').carousel('cycle');
//其他雷同
});
事件
$('#myCarousel').on('slide.bs.carousel', function() {
alert('当调用 slide 实例方式时立即触发');
});
$('#myCarousel').on('slid.bs.carousel', function() {
alert('当轮播完成一个幻灯片触发');
});
更多内容可以参考：Bootstrap学习教程
以上就是本文的全部内容，希望对大家学习Bootstrap轮播（Carousel）插件有所帮助。
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Ersetzen Sie Stringzeichen in JavaScript
Mar 11, 2025 am 12:07 AM
Detaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi
Benutzerdefinierte Google -Search -API -Setup -Tutorial
Mar 04, 2025 am 01:06 AM
Dieses Tutorial zeigt Ihnen, wie Sie eine benutzerdefinierte Google -Such -API in Ihr Blog oder Ihre Website integrieren und ein raffinierteres Sucherlebnis bieten als Standard -WordPress -Themen -Suchfunktionen. Es ist überraschend einfach! Sie können die Suche auf y beschränken
8 atemberaubende JQuery -Seiten -Layout -Plugins
Mar 06, 2025 am 12:48 AM
Nutzen Sie JQuery für mühelose Webseiten -Layouts: 8 Essential Plugins JQuery vereinfacht das Webseitenlayout erheblich. In diesem Artikel werden acht leistungsstarke JQuery -Plugins hervorgehoben, die den Prozess optimieren, insbesondere nützlich für die manuelle Website -Erstellung
Erstellen Sie Ihre eigenen AJAX -Webanwendungen
Mar 09, 2025 am 12:11 AM
Hier sind Sie also bereit, alles über dieses Ding namens Ajax zu lernen. Aber was genau ist das? Der Begriff AJAX bezieht sich auf eine lose Gruppierung von Technologien, mit denen dynamische, interaktive Webinhalte erstellt werden. Der Begriff Ajax, ursprünglich von Jesse J geprägt
Was ist ' this ' in JavaScript?
Mar 04, 2025 am 01:15 AM
Kernpunkte Dies in JavaScript bezieht sich normalerweise auf ein Objekt, das die Methode "besitzt", aber es hängt davon ab, wie die Funktion aufgerufen wird. Wenn es kein aktuelles Objekt gibt, bezieht sich dies auf das globale Objekt. In einem Webbrowser wird es durch Fenster dargestellt. Wenn Sie eine Funktion aufrufen, wird das globale Objekt beibehalten. Sie können den Kontext mithilfe von Methoden wie CALL (), Apply () und Bind () ändern. Diese Methoden rufen die Funktion mit dem angegebenen Wert und den Parametern auf. JavaScript ist eine hervorragende Programmiersprache. Vor ein paar Jahren war dieser Satz
10 Mobile Cheat Sheets für die mobile Entwicklung
Mar 05, 2025 am 12:43 AM
Dieser Beitrag erstellt hilfreiche Cheat -Blätter, Referenzführer, schnelle Rezepte und Code -Snippets für die Entwicklung von Android-, Blackberry und iPhone -App. Kein Entwickler sollte ohne sie sein! Touch Gesten -Referenzhandbuch (PDF) Eine wertvolle Ressource für Desig
Verbessern Sie Ihr JQuery -Wissen mit dem Quell Betrachter
Mar 05, 2025 am 12:54 AM
JQuery ist ein großartiges JavaScript -Framework. Wie in jeder Bibliothek ist es jedoch manchmal notwendig, unter die Motorhaube zu gehen, um herauszufinden, was los ist. Vielleicht liegt es daran, dass Sie einen Fehler verfolgen oder nur neugierig darauf sind, wie JQuery eine bestimmte Benutzeroberfläche erreicht
Wie erstelle ich meine eigenen JavaScript -Bibliotheken?
Mar 18, 2025 pm 03:12 PM
In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.
