Ajax加载图片轮播(11月份总结)

2016-11-15 | 前端 Javascript

这篇文章主要介绍Jquery实现Ajax加载图片轮播，以及用判断方法（主图和多图），比方说如果没有多图的时候，要考虑主图的优先来显示。客户要求商品详情页的轮播图必须是主图为显示的。我想了用if..else方法可以解决轮播图的主图来显示。

一、先去看看php图片接口地址，有两个分为主图和多图

Snip20161116 8

二、轮播图开始：

用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获取轮播图，如果遇到新的项目，遇到什么困难，怎么去解决问题，把这个问题的过程写在博客，这对于我来说是重要的。说实话这个工作笔记有帮助我提高水平。