近段时间,我按照w3c上boostrap的教程写轮播,写完发现这个轮播不能自动播放,需要手工点击到上一张或者下一张的图片后,才能自动播放,经过上网查资料才发现,w3c上的代码少了一个重要的地方:
< div id = "myCarousel" class = "carousel slide" data-ride="carousel" ><!-- w3c中的轮播代码少了 data-ride="carousel" 所以不能自动播放,需要点击后才可以自动播放 --><!-- 轮播(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= "./images/ph (1).jpg" alt= "First slide" ></ div >< div class= "item" >< img src= "./images/ph (2).jpg" alt= "Second slide" ></ div >< div class= "item" >< img src= "./images/ph (3).jpg" alt= "Third slide" ></ div ></ div ><!-- 轮播(Carousel)导航 -->< a class= "carousel-control left" href= "#myCarousel" data-slide= "prev" ></ a >< a class= "carousel-control right" href= "#myCarousel" data-slide= "next" ></ a ></ div >
< div id = "myCarousel" class = "carousel slide" data-ride="carousel" >
<!-- w3c中的轮播代码少了 data-ride="carousel" 所以不能自动播放,需要点击后才可以自动播放 -->
<!-- 轮播(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= "./images/ph (1).jpg" alt= "First slide" >
</ div >
< div class= "item" >
< img src= "./images/ph (2).jpg" alt= "Second slide" >
</ div >
< div class= "item" >
< img src= "./images/ph (3).jpg" alt= "Third slide" >
</ div >
</ div >
<!-- 轮播(Carousel)导航 -->
< a class= "carousel-control left" href= "#myCarousel" data-slide= "prev" ></ a >
< a class= "carousel-control right" href= "#myCarousel" data-slide= "next" ></ a >
</ div >
加上这个:
轮播图就可以不用操作自动播放了。data-ride= "carousel"
版权声明:本文为NeroSolomon原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。