响应式网站开发框架Bootstrap中Carousel插件的使用及使之支持手机端

Bootstrap是最受欢迎的Html、Css和Js框架，它用于开发响应式布局和移动设备优先的web项目。
Carousel是用于轮播的插件，它的初始化可以是带有标记的html代码即可。前提是需要引入boostrap.css和bootstrap.js,这两个文件可以去Bootstrap的官网去下载或者直接引入以下代码：

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。因此在生产环境中直接可以调用上面的代码。

接下来是html中写入：

<div id="myCarousel" class="carousel slide" >
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- 轮播（Carousel）项目 pc端-->
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="images/home/banner-1.JPG" alt="">
</div>
<div class="item">
<a href="service.html" style="display: block">
<img src="images/home/banner-2.jpg" alt="">
</a>
</div>
<div class="item">
<a href="cooperate.html" style="display: block">
<img src="images/home/banner-3.jpg" alt="">
</a>
</div>
<div class="item">
<img src="images/home/banner-4.jpg" alt="">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">
<div class="carousel-left"></div>
</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">
<div class="carousel-right"></div>
</a>
</div>

在浏览器中打开时图片即会轮播。上面的data-slide-to属性即初始化下标功能的。

在实际的应用中初始化统一要不都是使用属性驱动要不用js来初始化。

而在移动化要想实现滑动的效果需要引入移动端的事件，这里使用的是hammer.js。

<script src="js/hammer.min.js"></script>

在github上可以下载到hammer.js的源码。

这里轮播的初始化都用js来调用，如果不统一，轮播会出现bug。(js是单线程执行的)。js的代码如下：

$(".carousel").carousel({
interval:3000//设置动画的时间
}); //当加载页面时开始动画播放
//手机端的触摸事件
$('#myCarousel').hammer().on('swipeleft', function(){
$(this).carousel('next');
});
$('#myCarousel').hammer().on('swiperight', function(){
$(this).carousel('prev');
});

js引入的顺序必须按照顺序，不然在运行的时候后台会报错。

js引入顺序：



最后一个js是初始化carousel的js.(*在此之前要引入Jquery.js).