广告位随机切帧demo

最新推荐文章于 2022-07-09 21:09:46 发布

iKendall

最新推荐文章于 2022-07-09 21:09:46 发布

阅读量195

点赞数

分类专栏： JavaScript 文章标签：广告切帧 javascript

本文链接：https://blog.csdn.net/weixin_40688217/article/details/112578643

版权

JavaScript 专栏收录该内容

24 篇文章 3 订阅

订阅专栏

共2个展示位，2个*2帧图，首次进入随机展现一帧，再次进入切换另一帧，两帧一循环，曝光机会均等
无投放时隐藏，仅投放一张时，其余用默认素材补齐

json：

{
    "code": 0,
    "msg": "图片列表",
    "data": [
        "http://120.92.101.187/public/file/nihao.jpg",
        "http://120.92.101.187/public/file/gaoshan.jpg",
        "http://120.92.101.187/public/file/guomao.jpg",
        "http://120.92.101.187/public/file/timg.jpg",
        "http://120.92.101.187/public/file/yese.jpg",
        "http://120.92.101.187/public/file/my.docx",
        "http://120.92.101.187/public/file/my.xlsx"
    ]
}

注意：这里我们下面取js中的前三张图分成两组作为广告图，随机切帧曝光由于空缺一张，根据需求我们由默认图填补展示。

效果：
进入后随机展示两帧图中的一帧
此为含两张后台图片的那帧：
在这里插入图片描述
再次刷新，切换为只含一张后台图片的那帧，由于后台传过来的不足两张，则由第二张蓝底图即默认图填充广告位

html：

<!DOCTYPE html>
<html>
<head>
	<title>切帧</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="randomAd.js"></script>
	<style type="text/css">
		.a1ad img{
			width: 300px;
			height: 100px;
		}
	</style>
</head>
<body>

<div class="a1ad">
</div>

<script type="text/javascript">
	let storage_ad_obj = {
		  a1_ad: '',
		  a1_ad_status: false, 
	};
	$.ajax({
						type: "GET",
						url: "http://120.92.101.187/index.php/index/index/getImgList",
						crossDomain: true,
						dataType: 'json',
						success: function(data){
						console.log("success");
							// 切帧
							var a1_imgarr=[{group:[]},{group:[]}];	
							if(data.data) {
	                   				data.data.forEach(function (item, index) {
	                        		if (index < 2) {	
	                            		a1_imgarr[0].group.push(item);
	                        		} else if(index>=2&&index<3) {
	                            		a1_imgarr[1].group.push(item);
	                        		}
	                    			})
	               			}
							console.log(a1_imgarr);
							var storage_img = JSON.parse(localStorage.getItem('storage_ad'));

							// 过滤 取length大于0的
							var a1_ad_arr = a1_imgarr.filter(item => item.group.length > 0);

							console.log(storage_img);
							console.log(a1_ad_arr );
							var a1_ad_data = randomAd('storage_ad',a1_ad_arr, storage_ad_obj, storage_img, 'a1_ad_status', 'a1_ad');
							
			                if (a1_ad_data.length == 0) {
			                    a1_ad_data = {
			                        group: []
			                    };
			                }
							console.log(a1_ad_data);
							
							var a1=a1_ad_data;
							console.log(a1.group);
							var a1_str='';
							for(var i=0;i<a1.group.length;i++){
								a1_str+='<img src="'+a1.group[i]+'" />'+'</a>';
							}
							console.log(a1_str);
							// 无投放时隐藏，仅投放一张时，其余用默认素材补齐
							if(a1.group.length==1){
								a1_str+='<a><img src="http://xsxt.43.dev.eol.com.cn/app/html/www/material/fydd/gk/A1-590x60-02.jpg" /></a>';
							}
							$(".a1ad").html(a1_str);
							

							
							
						},
         			});
</script>
</body>
</html>

切帧js：

// 随机切帧函数
function randomAd(ad_key, first_imgarr, storage_ad_obj, storage_img, status, obj_current_key){
    // alert(1111111111111111)
    console.log(ad_key, first_imgarr, storage_ad_obj, storage_img, status, obj_current_key);
  if(!first_imgarr || first_imgarr.length == 0) {
    return [];
  }
console.log(first_imgarr);
  if(first_imgarr.length == 1) { //如果1张默认展示一张

    return first_imgarr[0];
    
  } else if(first_imgarr.length == 2) { //如果2张进行切帧
    
    if(storage_img && storage_img[status]) { //缓存已存在进行两帧循环

      let currentIndex = storage_img[obj_current_key];
      if(currentIndex > 0) {
        storage_img[obj_current_key] = 0;
        localStorage.setItem(ad_key, JSON.stringify(storage_img));
        return first_imgarr[0];
      }
      currentIndex ++;
      storage_img[obj_current_key] = currentIndex;
      localStorage.setItem(ad_key, JSON.stringify(storage_img));                                                                                                                                                                                                                                                                        
      return first_imgarr[currentIndex];

    } else { //首次进入页面随机选取一张图片存入缓存
      
      let random_img = first_imgarr[Math.floor((Math.random()*first_imgarr.length))]; //如果等于2张随机选择一张
      let index = first_imgarr.indexOf(random_img); //所选数据下标，保存到缓存中进行切帧使用
      storage_ad_obj[obj_current_key] = index;
      storage_ad_obj[status] = true;
      localStorage.setItem(ad_key, JSON.stringify(storage_ad_obj));
      return first_imgarr[index];

    }

  }
}