广告位随机切帧demo
作者：互联网
共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];
}
}
}
标签：a1,ad,img,demo,广告位,storage,切帧,imgarr,first 来源： https://blog.csdn.net/weixin_40688217/article/details/112578643