图片轮播--轮播图片的设计（三），玩转Bootstrap（JS插件篇）教程-慕课网

图片轮播--轮播图片的设计（三）

第四步：设计轮播图片控制器。很多时候轮播图片还具有一个向前播放和向后播放的控制器。在 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的）。

最终的效果如下：

上图展示的就是 Bootstrap 框架中 Carousel 插件实现的图片轮播的效果。只是上例展示的仅是设计效果，并不具备动画效果，接下来我们一起来看如何触发其播放效果。

任务

我来试试：在上一小节的基础上完成本小节所讲解的第四步。

?不会了怎么办

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

5-10 图片轮播--轮播图片的设计（三）

图片轮播--轮播图片的设计（三）

任务

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～

手记推荐