Le framework bootstrap implémente du code pour les images de carrousel automatiques-js tutoriel-php.cn

Le framework bootstrap implémente du code pour les images de carrousel automatiques

yulia

Libérer： 2018-10-19 11:49:28

original

7359 Les gens l'ont consulté

Avez-vous remarqué lors de la navigation sur le site Web que presque tous les sites Web ont une image de carrousel sur la page d'accueil ? En tant que développeur front-end, pouvez-vous utiliser le framework bootstrap pour écrire un carrousel d'images ? Cet article partagera avec vous le code du carrousel automatique dans le framework bootstrap. Il a une certaine valeur de référence. Les amis intéressés peuvent y jeter un œil.

Avant d'utiliser la mise en page du framework bootstrap, vous devez d'abord introduire les fichiers jQuery, CSS et JS pertinents. Si vous n'êtes pas clair, vous pouvez lire mon article précédent, Comment utiliser le framework bootstrap en HTML. pages , ou référez-vous au Tutoriel Bootstrap.

Le code de Bootstrap pour implémenter des images de carrousel automatiques est le suivant :

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>  
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="myCarousel" class="carousel slide" style="width: 500px;" data-ride = "carousel" data-interval="1000">
   <!-- 轮播（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="img/aaa1.jpg" alt="First slide">
    </div>
    <div class="item">
     <img src="img/aaa2.jpg" alt="Second slide">
    </div>
    <div class="item">
     <img src="img/aaa3.jpg" alt="Third slide">
    </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    
   </a>
   <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    
   </a>
  </div> 
 </body>
</html>

Copier après la connexion

: vous pouvez utiliser la souris pour cliquer sur le côté gauche de l'image pour voir l'image précédente, et cliquer sur le côté droit de l'image pour voir l'image suivante.

Ajoutez data-ride = "carousel" data-interval="1000" au div le plus externe pour obtenir l'effet de rotation automatique de l'image. L'intervalle de données peut définir la vitesse de rotation. Par exemple, utilisez 1000 millisecondes. une seconde équivaut à mille millisecondes.

Vous pouvez modifier le style du carrousel en fonction de vos besoins, comme la vitesse de changement d'image, etc.

L'effet est comme indiqué dans l'image :

Le framework bootstrap implémente du code pour les images de carrousel automatiques

Ce qui précède a partagé avec vous le code du framework bootstrap pour implémenter le carrousel d'images. simple. Si vous n'êtes pas sûr, vous pouvez visiter le site officiel du framework bootstrap : http://v3.bootcss.com J'espère que cet article vous sera utile ! Pour plus de didacticiels connexes, veuillez visiter le Manuel en ligne Bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!