章节
问答
笔记
评论
占位
占位

图片轮播--轮播图片的设计(三)

第四步:设计轮播图片控制器。很多时候轮播图片还具有一个向前播放向后播放的控制器。在 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 插件实现的图片轮播的效果。只是上例展示的仅是设计效果,并不具备动画效果,接下来我们一起来看如何触发其播放效果。

 

任务

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

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?