近段时间,我按照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"