bootstrap图片轮播插件carousel

本文主要是介绍bootstrap图片轮播插件carousel，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

start：需要引入bootstrap轮播插件 carousel.js 或者直接引入bootstrap.min.js

基本原理：

第一步：设置图片轮播的容器。---其他内容都需要放置在这个容器里

采用carousel样式，给这个容器一个ID值，方便后面采用data属性触发。

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

第二步：设置图片轮播计数器。

在容器div.carousel的内部添加图片轮播计时器，采用carousel-indicators样式，一般用ol有序列表（有几张图片放置几个li），以白点的形式展示(具体样式在bootstrap.css文件第5835行起)

<div id="demo" class="carousel"><ol class="carousel-indicators"><li class="active"></li><li></li><li></li></ol>
</div>

第三步：设置轮播图片播放区

最关键的区域，主要用来放置需要轮播的图片，用carousel-inner样式控制，用item容器放置每张轮播的图片。

<div id="demo" class="carousel"><ol class="carousel-indicators"><li class="active"></li><li></li><li></li></ol><div class="carousel-inner"><div class="item"><img src="img/indexLsit04.png"></div><div class="item"><img src=""></div></div></div>

第四步：设置图片轮播控制器

一般图片轮播会有一个向前向后播放的控制器，在此，用carousel-control样式配合left、right来实现。

<div id="demo" class="carousel"><ol class="carousel-indicators"><li class="active"></li><li></li><li></li></ol><div class="carousel-inner"><div class="item"><img src="img/indexLsit04.png"></div><div class="item"><img src=""></div></div><a class="carousel-control left"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="carousel-control right"><span class="glyphicon glyphicon-chevron-right"></span></a></div>

demo：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/><!-- 解决兼容问题--><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="renderer" content="webkit"><!-- 搜索引擎--><meta name="keywords" content="bootstrap,css,html"><script src="js/jquery-3.1.0.min.js"></script><!-- jquery在前边，bootstrap依赖jQuery--><script src="js/bootstrap.min.js"></script><link rel="stylesheet" href="css/bootstrap.min.css"/><link rel="icon" href="favicon.icon"><title></title><style>#slidershow{width: 300px;height: 300px;margin: 100px 400px;}img{width: 300px;height: 300px;}</style>
</head>
<body><div id="slidershow" class="carousel slide"><!-- 图片轮播 的容器--><!-- 设置图片轮播计数器   图片轮播的顺序--><ol class="carousel-indicators"><li class="active" data-target="#slidershow" data-slide-to="0"></li><li data-target="#slidershow" data-slide-to="1"></li><li data-target="#slidershow" data-slide-to="2"></li><li data-target="#slidershow" data-slide-to="3"></li><li data-target="#slidershow" data-slide-to="4"></li></ol><!-- 设置轮播图片播放区 --><div class="carousel-inner"><div class="item active"><a href="#"><img src="img/indexLsit01.png" alt="First slide"></a></div><div class="item"><a href="#"><img src="img/indexLsit02.png" alt="2 slide"></a></div><div class="item"><a href="#"><img src="img/indexLsit03.png" alt="3 slide"></a></div><div class="item"><a href="#"><img src="img/indexLsit04.png" alt="4 slide"></a></div><div class="item"><a href="#"><img src="img/indexLsit05.png" alt="5 slide"></a></div></div><!-- 设置图片轮播控制器 --><a class="left carousel-control " href="#slidershow"  data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control " href="#slidershow"  data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a></div><!-- 图片轮播 的容器--></body>
</html>

呈现出的样式：