乐趣区

关于bootstrap:Bootstrap图片轮播插件carousel

jiezi

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>

呈现出的款式：

退出移动版