<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<style type="text/css">
div#slider-img {width: 100%; height: 250px; top: 45px;}
</style>
<script type="text/javascript" charset="UTF-8">
mui.init();
</script>
<script src="js/jquery-1.12.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
mui.ajax('http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985286&sign=%2BY9lXIDh3W7j69unWYNEiSG3So2sMceBy%2B%2FiFf2ZfHh48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore',{
dataType:'json',
type:'get',//请求方式
timeout:10000,//超时
success:function(data){//成功
dataAnalyze(data);
},
error:function(error){//失败
console.log("返回失败");
}
});
mui.ajax('http://c.m.163.com/nc/article/headline/T1348647853363/30-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR/Msg7TLJv5TjaQQ6Hpjxd+aWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985878&sign=oDwq9mBweKUtUuiS/PvB015PyTDKHSxuyuVq2076XQB48ErR02zJ6/KXOnxX046I&encryption=1&canal=appstore',{
dataType:'json',type:'get',timeout:10000, success:function(data){
listDataAnalyze(data);
},error:function(error){
console.log("返回失败"+ error);
}
});
});
function dataAnalyze(data){
var arr = data.T1348647853363[0].ads;
var finalList = null;
var imgList = null;
for(var i = 0; i<arr.length;i++){
//轮播图标签结构
// finalList = '<div class="mui-slider-item"><a href="http://www.baidu.com"><p class="mui-slider-title">'+arr[i].title+'</p> </a></div>'
finalList = '<div class="mui-slider-item"><a href="#"><img src='+arr[i].imgsrc+'></a></div>';
//插入slider-img标签里面
$("div#slider-img").append(finalList);
//插入轮播标记
$("#slider-indicator").append('<div class="mui-indicator"></div>');
// 插入完成必须初始化，否则图片不能滚动
mui('.mui-slider').slider({
interval:0//自动轮播周期，若为0则不自动播放，默认为0；
});
}
}
function listDataAnalyze(data) {
var listDetail = null;
var arrayobj = data.T1348647853363;
for (var i = 0; i < arrayobj.length;i++) {
console.log(arrayobj[i].title);
listDetail = '<li class="mui-table-view-cell mui-media><a href="#"><div class="mui-media-body">'+arrayobj[i].digest+'</div></a>></li>';
$("#tableView-List").append(listDetail);
}
}
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">aJax请求数据</h1>
</header>
<div class="mui-slider " >
<div class="mui-slider-group" id="slider-img">
//图片、标题
</div>
<!--注意这里面是图片滚动的标记，div的数量要和上面的匹配-->
<div class="mui-slider-indicator" id="slider-indicator">
</div>
</div>
<ul class="mui-table-view" id="tableView-List">
</ul>
</body>
</html>