Code officiel du graphique carrousel BootStrap :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!--data-ride设置图片切换方式为滑动 -->
<div id= "carousel-example-generic" class= "carousel slide" data-ride= "carousel" >
<!-- 设置轮播图的数量和顺序-->
<!--data-target的值应与上面的id值对应 -->
<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>
<!-- 要展示的图片信息 -->
<div class= "carousel-inner" role= "listbox" >
<div class= "item active" >
<img src= "..." alt= "..." >
<div class= "carousel-caption" >
...
</div>
</div>
<div class= "item" >
<img src= "..." alt= "..." >
<div class= "carousel-caption" >
...
</div>
</div>
...
</div>
<!-- 控制图标 -->
<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>
|
Copier après la connexion
implémenter l'intervalle de temps du graphique carrousel Deux façons pour changer :
1. Ajoutez un attribut data-interval="millisecond" après data-ride, où milliseconde est le nombre de millisecondes qui doivent être définies, comme suit :
1 | <div id= "carousel-example-generic" class= "carousel slide" data-ride= "carousel" data-interval= "1000" >
|
Copier après la connexion
Utilisez les instructions JavaScript pour implémenter :
Le code donné sur le site officiel est :
1 | $(&# 39 ;.carousel&# 39 ;).carousel({interval: 2000 });
|
Copier après la connexion
Il ne peut pas être implémenté directement à l'aide de ce code. Une expression de fonction doit être ajoutée devant la méthode, comme suit. :
1 2 | $(function(){
$(&# 39 ;#carousel-example-generic&# 39 ;).carousel({interval: 1000 });});
|
Copier après la connexion
Recommandé : Tutoriel d'introduction au 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!