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