BootStrap轮播入门学习

image.png

一般模式
1首先要设置一个轮播图片的容器,记得设上id。

<div id="myCarousel" class="carousel slide"></div>

2.设计轮播图片计数器。
也就是轮播下面的这个小点

image.png

三个点分别对应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">
            ![](1.jpg)
        </div>
        <div class="item">
            ![](2.jpg)
        </div>
        <div class="item">
            ![](3.jpg)
        </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">
            ![](1.jpg)
        </div>
        <div class="item">
            ![](2.jpg)
        </div>
        <div class="item">
            ![](3.jpg)
        </div>
    </div>

</div> 

设置轮播标题

这个如果需要，也可以设置，如图

image.png

        <div class="item">
            ![](2.jpg)
            <div class="carousel-caption">标题 2</div>
        </div>

设置轮播导航

什么是导航？

image.png

如下

    <a class="carousel-control left" href="#myCarousel" 
       data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" 
       data-slide="next">&rsaquo;</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>

参考

全面解析Bootstrap图片轮播效果javascript技巧脚本之家