Graphique carrousel réactif de développement réactif H5

Carrousel

Carrousel réactif

Les images de carrousel sont un excellent outil fonction d'affichage des pages. Mais si vous souhaitez utiliser Js et jq, c'est plus gênant. Nous avons appris à utiliser le plug-in bootstrap pour créer facilement des images de carrousel à l'aide de styles intégrés.

Nous créons d'abord le contenu et les indicateurs du graphique d'enregistrement

<ol>
<li></li>
<li></li>
<li></li>
</ol>

rrree

Partie contenu

<div>
        <div >
            <img src="https://img.php.cn/upload/course/000/000/004/58195a76b3e4e324.jpg" alt="第一张">
        </div>
        <div>
            <img src="https://img.php.cn/upload/course/000/000/004/58195a9240209277.jpg" alt="第二张">
        </div>
        <div >
            <img src="https://img.php.cn/upload/course/000/000/004/58195abe6d829108.jpg"  alt="第三章">
        </div>
    </div>

Navigation carrousel

Ensuite, nous écrivons pour les trois parties

<a  href="#"></a>
<a  href="#"></a>

Utilisation

Grâce à l'attribut data : La position du carrousel peut être facilement contrôlée à l'aide de l'attribut data.

L'attribut data-slide accepte les mots-clés prev ou next, qui sont utilisés pour changer la position de la diapositive par rapport à la position actuelle. Utilisez data-slide-to pour transmettre un index de diapositive brut au carrousel, data-slide-to="2" déplacera le curseur vers un index spécifique, en comptant à partir de 0.

L'attribut data-ride="carousel" est utilisé pour marquer le carrousel pour démarrer l'animation lorsque la page est chargée.

Ceci complète notre graphique carrousel

<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" style="background: #E2DACF">
            <img src="https://img.php.cn/upload/course/000/000/004/58195a76b3e4e324.jpg" alt="第一张">
        </div>
        <div class="item" style="background: #000000">
            <img src="https://img.php.cn/upload/course/000/000/004/58195a9240209277.jpg" alt="第二张">
        </div>
        <div class="item" style="background: #FEDF85">
            <img src="https://img.php.cn/upload/course/000/000/004/58195abe6d829108.jpg"  alt="第三章">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="carousel-control left" href="#myCarousel"
       data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#myCarousel"
       data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
</div>

Difficultés de ce chapitre

Comment utiliser bootstrap pour compléter le graphique carrousel
Présentation et configuration de JS

section suivante

nouveau fichier

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
 <title>PHP中文网</title>
 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
 #myCarousel{
 margin: 50px 0 0 0;
 }
 .logo{
 padding: 0;
 }
 .daohang{
 margin-top: 0;
 }
 .carousel-inner img{
 margin: 0 auto;
 }
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
 <div class="container">
 <div class="navbar-header">
 <a href="#" class="navbar-brand logo" ><img src="https://img.php.cn/upload/course/000/000/004/5819475ea4910787.png" height="50" alt="PHP中文网"></a>
 <button type="button"class="navbar-toggle"data-toggle="collapse" data-target="#navbar-collapse">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 </div>
 <div class="collapse navbar-collapse"id="navbar-collapse">
 <ul class="nav navbar-nav navbar-right daohang " >
 <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
 <li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> 资讯</a></li>
 <li><a href="#"><span class="glyphicon glyphicon-fire"></span> 实例</a></li>
 <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 关于我们</a></li>
 </ul>
 </div>
 </div>
</nav>
<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" style="background: #E2DACF">
 <img src="https://img.php.cn/upload/course/000/000/004/58195a76b3e4e324.jpg" alt="第一张">
 </div>
 <div class="item" style="background: #000000">
 <img src="https://img.php.cn/upload/course/000/000/004/58195a9240209277.jpg" alt="第二张">
 </div>
 <div class="item" style="background: #FEDF85">
 <img src="https://img.php.cn/upload/course/000/000/004/58195abe6d829108.jpg" alt="第三章">
 </div>
 </div>
 <!-- 轮播（Carousel）导航 -->
 <a class="carousel-control left" href="#myCarousel"
 data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="carousel-control right" href="#myCarousel"
 data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
 $(function () {

 //轮播自动播放
 $('#myCarousel').carousel({
 //自动4秒播放
 interval : 4000,
 });
 });
</script>
</body>
</html>

soumettre Réinitialiser le code

Opération automatique

Plein écran