bootstrap轮播图片的设计

2016年11月17日 323点热度 0人点赞 0条评论

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

  ☑ 轮播的图片

  ☑ 轮播图片的计数器

  ☑ 轮播图片的控制器

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

第一步:设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式,并且给这个容器定义一个 ID 值,方便后面采用 data 属性来声明触发。

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

第二步:设计轮播图片计数器。在容器 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的)。

37930bootstrap轮播图片的设计

这个人很懒,什么都没留下

文章评论