bootstrap轮播图片的设计

bootstrap轮播图片的设计

一个轮播图片主要包括三个部分：

• ☑ 轮播的图片

• ☑ 轮播图片的计数器

• ☑ 轮播图片的控制器

复杂一点的轮播图片，每个轮播区会带有对应的标题和描述内容。那么在 Bootstrap 框架中，轮播图是如何设计的呢？

第一步：设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并且给这个容器定义一个 ID 值，方

便后面采用 data 属性来声明触发。

第二步：设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器，采用 carousel-

indicators 样式，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，一般采用有顺列表来制作：

<div id="slidershow" class="carousel">
<!-- 设置图片轮播的顺序 -->
<ol class="carousel-indicators">
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    ...
</ol>
</div>

在 Bootstrap 框架中，轮播图片计数器，都是以圆点向大家呈现，其具体样式如下：

/*bootstrap.css文件第5835行～第5863行*/
.carousel-indicators {
position: absolute; /*整个计数区域绝对定位*/
bottom: 10px; /*距容器carousel底部10px*/
z-index: 15; /*设置其在Z轴的层级*/
/*让整个计数区水平居中*/
left: 50%;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
border: 1px solid #fff;
border-radius: 10px;
}
/*设置当前状态样式*/
.carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: #fff;
}

第三步：设计轮播图片播放区。轮播图整个效果中，播放区是最关键的一个区域，这个区域主要用来放置需要轮播的图片。这个区域使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片：

<div id="slidershow" class="carousel">
    <!-- 设置图片轮播的顺序 -->
       <ol class="carousel-indicators">
        <li class="active">1</li>
            …
        </ol>
    <!-- 设置轮播图片 -->
    <div class="carousel-inner">
        <div class="item active">
            <a href="##"><img src="ll580x145.jpg" alt=""></a>
        </div>
           <div class="item">
            <a href="##"><img src="580145.jpg" alt=""></a>
        </div>
                …
        <div class="item">
            <a href="##"><img src="580145.jpg" alt=""></a>
        </div>
    </div>
</div>

其主要通过 carousel-inner 来控制其样式呈现。

第四步：设计轮播图片控制器。很多时候轮播图片还具有一个向前播放和向后播放的控制器。在 Carousel 中通过 carousel-control 样式配合 left 和 right 来实现。其中left表示向前播放，right表示向后播放。其同样放在carousel容器内：

 <div id="slidershow" class="carousel">
    <!-- 设置图片轮播的顺序 -->
    <ol class="carousel-indicators">
       …
    </ol>
    <!-- 设置轮播图片 -->
    <div class="carousel-inner">
        …
    </div>
    <!-- 设置轮播图片控制器 -->
       <a class="left carousel-control" href="" >
        <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
    <a class="right carousel-control" href="">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

通过两个 a 链接然后在内部定义要显示的小图标，一个是向前，一个是向后。
这两个图标都显示在图片容器的上面（z-index的值大于carousel-inner的）。

本文转载自 http://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649084355&idx=1&sn=b8f8542961fb22ec79f08d11712c6efb&chksm=be5bf66e892c7f7805bc5798806a4b15e9a21de68a32996b34a37e0ef8b63ff574cef09ae2a2&mpshare=1&scene=23&srcid=1120rw2qKTy789hDAF6IAO5R#rd