suchen

Heim >Web-Frontend >js-Tutorial >Implementieren Sie ganz einfach Bootstrap-Image-Carousel_Javascript-Fähigkeiten

Implementieren Sie ganz einfach Bootstrap-Image-Carousel_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:20:261142Durchsuche

Das Beispiel in diesem Artikel erklärt den detaillierten Code von Bootstrap zur Implementierung des Bildkarussells und teilt ihn als Referenz mit Ihnen. Der spezifische Inhalt ist wie folgt

Spezifischer Code: 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 <style type="text/css">
 img{
  margin:0 auto;
 }
 </style>
</head>
<body>

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>

 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
 <div class="item active">
 <img src="images/lunbo1.jpg" height="266" width="800" alt="...">
 <div class="carousel-caption">
 ...
 </div>
 </div>
 <div class="item">
 <img src="images/lunbo2.jpg" height="266" width="800" alt="...">
 <div class="carousel-caption">
 ...
 </div>
 </div>
 <div class="item">
 <img src="images/lunbo3.jpg" height="266" width="800" alt="...">
 <div class="carousel-caption">
 ...
 </div>
 </div>
 ...
 </div>

 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 <span class="sr-only">Previous</span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 <span class="sr-only">Next</span>
 </a>
</div>
</body>
</html>

Wirkung

Optionale Parameter

  • data-ride=“carousel“: Es kann automatisch abgespielt werden und wird erst abgespielt, wenn Klicks gemacht werden.
  • Titel hinzufügen

Der Titel wird zwischen 37d760be2884a8731575e6abd7ceaaba16b28748ea4df4d9c2150843fecfba68 geschrieben Zum Beispiel: 

<div class="carousel-caption">
 <h3>果壳推书正式上线</h3>
 <p>好书分享、经验交流</p>
</div>
Das Obige ist eine detaillierte Einführung in das Javascript-Bildkarussell. Ich hoffe, dass dieser Artikel für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.

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：Lernen Sie JavaScript-Entwurfsmuster – Proxy-Muster_Javascript-KenntnisseNächster Artikel：Lernen Sie JavaScript-Entwurfsmuster – Proxy-Muster_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen