Implémentez facilement les compétences carousel_javascript de l'image Bootstrap-js tutoriel-php.cn

Implémentez facilement les compétences carousel_javascript de l'image Bootstrap

WBOY

Libérer： 2016-05-16 15:20:26

original

1123 Les gens l'ont consulté

L'exemple de cet article explique le code détaillé de Bootstrap pour implémenter le carrousel d'images et le partage avec vous pour votre référence. Le contenu spécifique est le suivant

Code spécifique :

<!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>

Copier après la connexion

Effet

Paramètres facultatifs

data-ride=”carousel” : Il peut être joué automatiquement et ne sera joué que lorsque des clics seront effectués.
Ajouter un titre

Le titre est écrit entre

Par exemple :

<div class="carousel-caption">
 <h3>果壳推书正式上线</h3>
 <p>好书分享、经验交流</p>
</div>

Copier après la connexion

Ce qui précède est une introduction détaillée au carrousel d'images javascript. J'espère que cet article sera utile à tout le monde dans l'apprentissage de la programmation javascript.