分针网——每日分享：BootStrap轮播入门学习

一般模式 1首先要设置一个轮播图片的容器,记得设上id。 <div id="myCarousel" class="carousel slide"> </div> 2.设计轮播图片计数器。 也就是轮播下面的这个小点 三个点分别对应123.用data-slide-to参数进行控制。 data-targe参数照抄，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。 <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> 3.设计图片轮播区，这个区域用来放置图片。 把图片放置在class="carousel-inner"的div区域中。 然后每个图片放在class="item"的div区域。 <div class="carousel-inner"> <div class="item active">  </div> <div class="item">  </div> <div class="item">  </div> </div> 最终 <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">  </div> <div class="item">  </div> <div class="item">  </div> </div> </div> 设置轮播标题 这个如果需要，也可以设置，如图 <div class="item">  <div class="carousel-caption">标题 2 </div> </div> 设置轮播导航 什么是导航？ 如下 <a class="carousel-control left" href="#myCarousel" data-slide ="prev" > ‹ </a> <a class="carousel-control right" href="#myCarousel" data-slide ="next" > › </a> 设置轮播自动播放 此时需要jquery出售了。interval: 设置自动播放间隔时间 <script > $ (document ) . ready ( function ( ) { $ ( '.carousel' ) . carousel ( { interval : 30 } ) } ) ; < /script > 综上 <div id = "myCarousel" class = "carousel slide" data -interval = "2" > < ! -- 轮播（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" > ! [ ] ( 1 .jpg ) <div class = "carousel-caption" >标题 1 < /div > < /div > <div class = "item" > ! [ ] ( 2 .jpg ) <div class = "carousel-caption" >标题 2 < /div > < /div > <div class = "item" > ! [ ] ( 3 .jpg ) <div class = "carousel-caption" >标题 3 < /div > < /div > < /div > < ! -- 轮播（Carousel）导航 -- > <a class = "carousel-control left" href = "#myCarousel" data -slide = "prev" > &lsaquo ; < /a > <a class = "carousel-control right" href = "#myCarousel" data -slide = "next" > &rsaquo ; < /a > < /div > <script > $ (document ) . ready ( function ( ) { $ ( '.carousel' ) . carousel ( { interval : 30 } ) } ) ; < /script > 本文转自：http://www.f-z.cn/id/278