start:需要引入bootstrap轮播插件 carousel.js 或者直接引入bootstrap.min.js

基本原理:

第一步:设置图片轮播的容器。---其他内容都需要放置在这个容器里
采用carousel样式,给这个容器一个ID值,方便后面采用data属性触发。

<div id="demo" class="carousel"></div>

第二步:设置图片轮播计数器。
在容器div.carousel的内部添加图片轮播计时器,采用carousel-indicators样式,一般用ol有序列表(有几张图片放置几个li),以白点的形式展示(具体样式在bootstrap.css文件第5835行起)

<div id="demo" class="carousel">
        <ol class="carousel-indicators">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ol>
</div>

第三步:设置轮播图片播放区
最关键的区域,主要用来放置需要轮播的图片,用carousel-inner样式控制,用item容器放置每张轮播的图片。

<div id="demo" class="carousel">

        <ol class="carousel-indicators">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ol>

    <div class="carousel-inner">
        <div class="item">
            ![](img/indexLsit04.png)
        </div>
        <div class="item">
            ![]()
        </div>
    </div>

</div>

第四步:设置图片轮播控制器
一般图片轮播会有一个向前向后播放的控制器,在此,用carousel-control样式配合left、right来实现。

<div id="demo" class="carousel">

        <ol class="carousel-indicators">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ol>

    <div class="carousel-inner">
        <div class="item">
            ![](img/indexLsit04.png)
        </div>
        <div class="item">
            ![]()
        </div>
    </div>

    <a class="carousel-control left">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

</div>

demo:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
    <!-- 解决兼容问题-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- 搜索引擎-->
    <meta name="keywords" content="bootstrap,css,html">

    <script src="js/jquery-3.1.0.min.js"></script>
    <!-- jquery在前边,bootstrap依赖jQuery-->
    <script src="js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="icon" href="favicon.icon">
    <title></title>
    <style>
        #slidershow{
            width: 300px;
            height: 300px;
            margin: 100px 400px;
        }
        img{
            width: 300px;
            height: 300px;
        }

    </style>
</head>
<body>

<div id="slidershow" class="carousel slide"><!-- 图片轮播 的容器-->

    <!-- 设置图片轮播计数器   图片轮播的顺序-->
    <ol class="carousel-indicators">
        <li class="active" data-target="#slidershow" data-slide-to="0"></li>
        <li data-target="#slidershow" data-slide-to="1"></li>
        <li data-target="#slidershow" data-slide-to="2"></li>
        <li data-target="#slidershow" data-slide-to="3"></li>
        <li data-target="#slidershow" data-slide-to="4"></li>
    </ol>

    <!-- 设置轮播图片播放区 -->
    <div class="carousel-inner">
        <div class="item active">
            <a href="#">![](img/indexLsit01.png)</a>
        </div>
        <div class="item"><a href="#">![](img/indexLsit02.png)</a></div>
        <div class="item"><a href="#">![](img/indexLsit03.png)</a></div>
        <div class="item"><a href="#">![](img/indexLsit04.png)</a></div>
        <div class="item"><a href="#">![](img/indexLsit05.png)</a></div>
    </div>

    <!-- 设置图片轮播控制器 -->
    <a class="left carousel-control " href="#slidershow"  data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control " href="#slidershow"  data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

</div><!-- 图片轮播 的容器-->

</body>
</html>

呈现出的样式:

03-05 22:24