今天我们学习在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 移动端的各种插件。