所有新上线的站点,原则上,前端都需要将页面上的图片模块(包括但不限于图片Banner,广告图,新闻图)替换为用广告系统获取(以前是用新闻发布系统获取),前端也需要提醒编辑提供对应的广告位id
http://res.nie.netease.com/comm/js/jquery(mixNIE).last.js
,移动端用http://res.nie.netease.com/comm/js/zepto(mixNIE).last.js
class
为adbase-ctn
的类,如: <ul id="img-list" class="img-list adbase-ctn">
<!--注意以下为demo示例,最终下面的列表是不存在html中,只存在对应的父级节点-->
<li><a href="http://www.163.com"><img src="1.jpg" /></a></li>
<li><a href="http://www.163.com"><img src="1.jpg" /></a></li>
<li><a href="http://www.163.com"><img src="1.jpg" /></a></li>
</ul>
js
中调用如下代码: //ADBase对象存在jquery的公共库,可以直接调用,一个页面只需要调用一次
ADBase.config({
pos : 'luandou-lunbo-8234'//此为广告位的id,多个用`,`隔开
callback : function(flag,data){
//如果flag是false,表示广告调用失败,直接返回就可以了,页面会自动变成一个加载失败的图片
if(flag == false)return false;
//这里直接用上面写好的pos值作为key去获取广告数据,多个pos,需要获取多次,每个pos值对应一个广告位的数据
var lunboItems = data['luandou-lunbo-8234'];
//循环获取广告数据
var lunboHtml = '';
for(var i=0;i<lunboItems.length;i++){
var item = lunboItems[i];
//url为点击的跳转链接,title为标题,src为广告大图,thumbsrc为为广告的缩略小图(一般不会有)
lunboHtml += '<li><a href="'+item.url+'" title="'+item.title+'"><img src="'+item.src+'" /></a></li>';
}
$("#img-list").html(lunboHtml);
//处理图片轮播事件,以及增加分页等操作
}
});