MUI 混合开发 轮播图应用
在MUI api中轮播代码
<div id="slider" class="mui-slider" >
//轮播盒子
<!--支持循环,需要重复图片节点-->
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!--支持循环,需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
</div>
//下标盒子
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
上面的代码可以看出在mui中无缝循环轮播的机制是第一张图片前是周后一张图片,最后一张图片后是第一张图片,下面说下关于ajax获取img url动态添加到dom中的处理。
ajax与mui轮播图结合
html部分代码
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<style>
#banner{
height: 200px;
width: 100%;
}
</style>
</head>
<body>
<!--轮播盒子-->
<div id="slider" class="mui-slider" >
</div>
</body>
</html>
JavaScript部分代码
<script>
//ajax获取
mui.ajax('http://datainfo.duapp.com/shopdata/getBanner.php?callback=',{
dataType:'jsonp',//服务器返回json格式数据
type:'post',//HTTP请求类型
success:function(data){
//字符串转arr
var l=data.length;
var data=data.substring(1,l-1)
var arr=JSON.parse(data)
//获取arr长度
var arrl=arr.length-1
//图片html代码
//轮播盒子
var tmp='<div class="mui-slider-group mui-slider-loop">';
//第一个或者最后一个轮播图
var tmp1='<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="'
//常规轮播图
var tmp2='<div class="mui-slider-item"><a href="#"><img src="'
//公共结尾
var tmp3='" id="banner"></a></div>'
//按钮盒子
//按钮盒子
var anniu='<div class="mui-slider-indicator">'
//第一个按钮盒子
var anniu1='<div class="mui-indicator mui-active"></div>'
//常规按钮盒子
var anniu2='<div class="mui-indicator"></div>'
//循环遍历arr
for(i in arr){
//获取img src
var img=JSON.parse(arr[i].goodsBenUrl)[0];
//判断i是否为0
if(i==0){
tmp+=tmp1+JSON.parse(arr[arrl].goodsBenUrl)[0]+tmp3
anniu+=anniu1
}else{
anniu+=anniu2
}
tmp+=tmp2+img+tmp3
if(i==arrl){
tmp+=tmp1+JSON.parse(arr[0].goodsBenUrl)[0]+tmp3
}
}
//轮播盒子结尾
tmp+='</div>'
//按钮盒子结尾
anniu+='</div>'
//轮播与按钮拼接
tmp+=anniu
//获取页面上的盒子
var bigbox=document.getElementById('slider')
//添加进盒子
bigbox.innerHTML=tmp;
//手动调用图片轮播的初始化方法
var gallery = mui('.mui-slider');
gallery.slider({
interval:5000//自动轮播周期,若为0则不自动播放,默认为0;
});
}
});
</script>
补充下:上面数据接口地址 http://datainfo.duapp.com//shopdata//datainfo.html