响应式网站开发框架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).