Bootstrap3制作图片轮播效果

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

第四步:设置轮播图片描述.很多轮播图片效果，在每个图片上还对应有自己的标题和描述内容。其实 Bootstrap 框架中的 Carousel 也提供类似的效果。只需要在 item 中图片底部添加对应的代码.

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

二、实现过程

<div class="jb51code">
<pre class="brush:xhtml;">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">
<li data-target="#carousel-example-generic" data-slide-to="1">
<li data-target="#carousel-example-generic" data-slide-to="2">

<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left">
<span class="sr-only">Previous

<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right">
<span class="sr-only">Next

分为三个部分

1、指示器 一个部分是下面的小点..就是指示器

每个里data-slide-to="0" 属性用于指引位置 class="active" 定义默认激活状态 item

没啥悬念 就是每一个项目，填充图片

题目

内容

2、左右控制器 代码如下

在javascript中操作

初始化

进行循环

暂停

定位到具体某一个item 从0开始

前一个

下一个

关于Bootstrap的更多内容大家还可以参考专题进行学习： 《Bootstrap学习教程》

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!