根据后台数据生成动态轮播图

最新推荐文章于 2023-05-04 18:25:34 发布

happyElina

最新推荐文章于 2023-05-04 18:25:34 发布

阅读量5.2k

点赞数 1

分类专栏：技术总结文章标签： JavaScript jQuery

本文链接：https://blog.youkuaiyun.com/happyElina/article/details/79346221

版权

本文介绍如何根据后台数据动态创建包含视频的轮播图。通过JavaScript和jQuery实现轮播图元素的生成，并根据数据播放指定次数的视频，同时支持大小轮播效果。代码中包括请求后台数据、生成轮播元素以及启动轮播的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在假期结束之前总结上份工作中最难部分，即根据后端数据自动生成轮播图，轮播图中包含视频，如果遇到视频资料，根据数据要求播放指定次数后继续轮播。

以下为代码实现：

//生成轮播元素,arr轮播数组数据,id轮播父元素,guige中big,small分别代表大小轮播
function getLunboEles(arr,id,guide){
var lis='' ;
var width,height,tagtop,tagwidth,tagleft;
var tagname = "."+guide + "_lunbo_tag";
if(guide == "big") {
width = 1080;
height = 1920;
tagtop = 1820;
tagwidth = 50 * arr.length + "px";
tagleft = (1080 - 50 * arr.length) / 2;
}else {
width = 1080;
height = 430;
tagtop = 330;
tagwidth = 40 * arr.length + "px";
tagleft = (1080 - 40 * arr.length) / 2;
}
$(tagname).css({
"width":tagwidth,
"left":tagleft

});

for (var i = 0; i < arr.length; i ++) {

if(arr[i].type == 1) { // 类别：1-图片 2-视频 3-音频
lis = lis+'<li click="'+arr[i].click+'" beginUrl="'+ arr[i].beginUrl+'" endUrl="'+ arr[i].endUrl+'" operationStayTime="'+ arr[i].stayTime+'" win_url_boss="'+ arr[i].win_url_boss+'" win_url_zmt="'+ arr[i].win_url_zmt+'" endTime="'+ arr[i].endTime+'" ><img looper = "0" src="operation/'+arr[i].src +'"></li>';
}else if

最低0.47元/天解锁文章