Ajax加载图片轮播(11月份总结)
这篇文章主要介绍Jquery实现Ajax加载图片轮播,以及用判断方法(主图和多图),比方说如果没有多图的时候,要考虑主图的优先来显示。客户要求商品详情页的轮播图必须是主图为显示的。我想了用if..else方法可以解决轮播图的主图来显示。
一、先去看看php图片接口地址,有两个分为主图和多图
二、轮播图开始:
- 用var变量,创建四个名,分为str、strs、firstFlash和secondFlash。
- str表示为商品主图
- strs表示为商品多图
- firstFlash表示为额外增加的一个节点(第一个节点是最后一张轮播)
- secondFlash表示为额外增加的一个节点(最后一个节点是第一张轮播)
var str = '';
var strs = '';
var firstFlash = '';
var secondFlash = '';
三、商品主图的HTML拼接
Ajax获取goods_img作为商品主图,是单图的。因为后台上传商品主图是一个的,没有两个吧。
strs+='<div class="mui-slider-item lunbo">'+
'<a href="#" style="text-align:center"><img class="goods_img" style="width:50%;height:50%;" src="'+data.data.goods_img+'" /></a>'+
'</div>';
四、商品多图的拼接
如果后台上传多个图片,应该用for遍历来方法显示的,Ajax获取data.data.goods_img_list作为商品多图。
for (var i = 0; i < data.data.goods_img_list.length; i++) {
str+='<div class="mui-slider-item lunbo">'+
'<a href="#" style="text-align:center"><img class="goods_img" style="width:50%;height:50%;" src="'+data.data.goods_img_list[i]+'" /></a>'+
'</div>';
}
五、额外增加的第一个节点
firstFlash+= '<div class="mui-slider-item mui-slider-item-duplicate">'+
'<a href="###">'+
'<img src="'+data.data.goods_img+'" style="width:50%;height:50%;">'+
'</a>'+
'</div>';
六、额外增加的最后一个节点
secondFlash+= '<div class="mui-slider-item mui-slider-item-duplicate" id="secondFlash"><a href="###"><img src="'+data.data.goods_img+'" style="width:50%;height:50%;"></a></div>';
七、用if...else判断并显示为:
- 如果商品多图是不存在的,获取商品主图的goods_img不等于null的时候就显示;
- 获取data.data.goods_img_list,当数组的长度是1,就表示data.data.goods_img_list.length,如果商品主图不存在的,商品多图等同1的时候只显示只第一个图片;
- 如果商品多图有很多图片,应该是data.data.goods_img_list.length大于1;如果商品主图不等于null,就显示;
- 如果商品主图不存在,data.data.goods_img_list.length大于1的时候商品多图就显示;
- 如果商品主图存在,商品多图是一个图片
if (data.data.goods_img != null && data.data.goods_img_list.length == 1) {
$('#slider').addClass('mui-slider');
$('#slider').css('text-align','center');
$('.mui-slider-loop').append(firstFlash+strs+str+secondFlash);
} else if (data.data.goods_img_list.length == 1) {
$('#slider').css('text-align','center');
$('.mui-slider-loop').append(str);
} else if (data.data.goods_img_list.length > 1) {
$('#slider').addClass('mui-slider');
$('.mui-slider-loop').append(str);
} else if (data.data.goods_img != null && data.data.goods_img_list.length > 1) {
$('#slider').addClass('mui-slider');
$('#slider').css('text-align','center');
$('.mui-slider-loop').append(firstFlash+strs+str+secondFlash);
} else if (data.data.goods_img != null) {
$('#slider').css('text-align','center');
$('.mui-slider-loop').append(strs);
}
var gallery = mui('.mui-slider');
gallery.slider({
interval:5000//自动轮播周期,若为0则不自动播放,默认为0;
});
九、基本轮播图是采用MUI框架,对了我忘了要补写简单的代码:
<!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>
<link rel="stylesheet" href="css/mui.min.css" />
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--轮播图开始-->
<div class="mui-content">
<div id="slider" class="mui-lunbo">
<div class="mui-slider-group mui-slider-loop">
</div>
<!--<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
</div>-->
</div>
</div>
<!--轮播图结束-->
</body>
</html>
十、轮播图怎么放在Ajax代码里面
$.ajax({
url: "http://weixin.weipe360.com/water_shuidaojia/napi.php?s=/shop/goods_detail&token=99000554006372&ajax=1",
type: 'GET',
dataType: 'jsonp', //here
success: function(data) {
//写轮播图代码
}
});
小总结:
MUI轮播图插件有时候不流畅的,反正这个不重要的。不过我主要怎么写Ajax获取轮播图,如果遇到新的项目,遇到什么困难,怎么去解决问题,把这个问题的过程写在博客,这对于我来说是重要的。说实话这个工作笔记有帮助我提高水平。