Maison > Article > interface Web > Le framework bootstrap implémente du code pour les images de carrousel automatiques

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

yuliaoriginal: 2018-10-19 11:49:287299parcourir

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>

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pure JS implémente le code permettant de cliquer sur le bouton pour revenir en haut de la pageArticle suivant：Pure JS implémente le code permettant de cliquer sur le bouton pour revenir en haut de la page

Articles Liés

Voir plus