appframework实现Banner轮播图

今天我们学习在appframework3.0框架里面使用Banner轮播图，由于appframework直接引用了jquery2.0的框架，这里我们就可以直接使用jquery插件，这对于比较擅长jquery的同学 是一个福音。
先上效果图

使用的jquery插件是swiper插件，网址是http://www.swiper.com.cn/，这个是用比较简单，我这里就说明几点需要注意的，或者是大家可能会遇到的问题。

贴一点代码吧

css引用
<!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <!-- Link Swiper's CSS End -->
js引用
<script src="js/swiper.min.js"></script>

这里有一点需要说明，swiper初始化，官网里面是直接在初始化的，但是在这个框架里面不能这么做，要写成如下所示：

<script language="JavaScript" type="text/javascript">
    $(function () {
        //swiper初始化代码写在这里
    })
</script>

原因是框架宽度和高度确定是在整个界面加载完成之后才确定的。

额外css代码
/* banner start */
.swiper-container {
    width: 100%;
    max-height: 400px;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
/* banner end */

swiper初始化代码
<script language="JavaScript" type="text/javascript">
    $(function () {
        //swiper初始化代码写在这里
        //获取图片宽度
        var imgheight=$(".swiper-container img").height();
        $(".swiper-container").css("height",imgheight);
        var swiper = new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          paginationClickable: true,
          observer:true,//修改swiper自己或子元素时，自动初始化swiper
          observeParents:true,//修改swiper的父元素时，自动初始化swipe
        });
    })
</script>

在swiper初始化的设置高度是为了图片的自适应，毕竟安卓手机碎片化太严重了，不能为每个安卓手机定义图片的高度。
这节教程相对比较简单，大家可以在这个的基础上扩展学习jquery 移动端的各种插件。