Bootstrap中图片轮播的示例分析

小编给大家分享一下Bootstrap中图片轮播的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

岳阳县网站制作公司哪家好，找创新互联公司！从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作，到程序开发，运营维护。创新互联公司公司2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。

Bootstrap是什么

Bootstrap是目前最受欢迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷，它还有一个响应最好的Grid系统，并且能够在手机端通用，而Bootstrap是使用许多可重用的CSS和JavaScript组件，可以帮助实现需要的几乎任何类型的网站的功能，此外，所有这些组件都是响应式的。

图片轮播效果在Web中常常能看到，很多人也称之为幻灯片。其主要显示的效果就是多幅图片轮流播放。鼠标悬停在图片时会暂停播放，如果鼠标悬停或单击右下角圆点时，会显示对应的图片。这种图片轮播效果，在Bootstrap框架中是通过Carousel插件来实现的。

结构

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

轮播的图片
轮播图片的计数器
轮播图片的控制器

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

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

第二步：设计轮播图片计数器。在容器 p.carousel 的内部添加轮播图片计算器，采用 carousel-indicators 样式，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，一般采用有序列表来制作：

在 Bootstrap 框架中，轮播图片计数器，都是以圆点呈现

.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 容器来放置每张轮播的图片

1 …

图片标题

描述内容...

…

1 2 3

图片标题1

描述内容1...

图片标题2

描述内容2...

图片标题3

描述内容3...

1 2 3

图片标题1

描述内容1...

图片标题2

描述内容2...

图片标题3

描述内容3...

.carousel("cycle")：从左向右循环播放； .carousel("pause")：停止循环播放； .carousel("number")：循环到指定的帧，下标从0开始，类似数组； .carousel("prev")：返回到上一帧； .carousel("next")：下一帧

1 2 3

图片标题1

描述内容1...

图片标题2

描述内容2...

图片标题3

描述内容3...

播放暂停上一帧下一帧

重庆分公司，新征程启航

Bootstrap中图片轮播的示例分析

Bootstrap是什么

结构

图片标题

声明式触发

图片标题1

图片标题2

图片标题3

JS触发

图片标题1

图片标题2

图片标题3

图片标题1

图片标题2

图片标题3

其他资讯