多终端轮播广告

当前版本:V1 最近更新:2012-09-26 组件作者:rukkihuang

 

组件说明

rukki自己写的支持移动端滑动和PC端点击的自动切换的轮播组件。自己也一直在用。只需要3步:
1.把默认轮播样式贴到页面css里;
2.链入.js
3.填写广告频道ID和广告位ID。
支持页面同时N组轮播。

更新日志

  • 2014/12/02 更新组件说明
  • 2012/09/26 发布

非milo版本组件使用

1、html结构

    

2、样式代码

/*广告样式。 修改好外框的width\height就行。按钮有自定义的需要请修改'.adBtn'系列*/
.ggBox { width:718px; height:277px}/*修改成设计稿上图片的高宽即可*/
.ggBox { position:relative; background:#0e97dc; overflow:hidden}
.adPic { position:absolute; width:100%; height:100%; left:0; top:0}
.adPic a { display:block; width:100%; height:100%; overflow:hidden; position:absolute; left:0; top:0; background:#0e97dc}
.adPic img { width:100%; height:100%; position:absolute; top:0; left:0}
.adPic p { position:relative; padding-top:50px}
.loadI { width:130px; text-align:center; line-height:20px; color:#FFF; background:#18b2ff; margin:0px auto; display:block}
.adPicUl { width:1000%; height:100%; overflow:hidden; -webkit-transition: all 0.1s linear; -webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden}
.adPicUl li { float:left; width:14.3%}
.adPicUl a { display:block; width:100%}
.adPicUl img { display:block; width:100%; height:100%}
.adBtn { position:absolute; z-index:2; right:17px; bottom:20px; height:20px}
.adBtn a { display:block; float:left; text-indent:-5000px;  margin-right:3px; overflow:hidden; width:19px; height:19px; background-image:url(http://ossweb-img.qq.com/images/game/portal2012/roll_btn.png); background-repeat:no-repeat; background-position:0 1px}/*小按钮样式*/
a.on { background-position:-19px 1px;_background:#efefef}/*当前帧样式*/
.adBtn a:hover { background-position:-19px -18px}/*小按钮鼠标经过样式*/

3、JS调用

	 

页面里填写广告的ID,需要几组就new几组

var test=new tgAds({     
	ggID:'461' //广告所属的频道ID
	,info:['2024','2025','2026','2027','2033','2034'] //,info:'201206'
	,box:'ggBox' //填写放置广告的div的ID   
	,pgv:'index.adsRolling.ad' //[可选参数]点击流名称,序号会自动添
	,mouse:false //[可选参数]设置小按钮翻页是点击还是鼠标经过
})

DEMO演示

demo;

感兴趣可以继续往下看

填写广告位ID里,支持2种格式,第一种就是数组 ,info:['2024','2025','2026','2027','2033','2034'],聪明的你一定知道这是直接填入几帧广告位ID。
还一种呢就是直接填入 ,info:'201206',它呢就是广告系统里“广告位所属组ID”这个东西(在新建广告位的时候你自己填的)。
为什么要这样呢?因为产品可能随时要增加或者减少一帧广告,那么产品后台在后台修改不需要麻烦重构了,误删也不会报错~因为组件只动态抓去属于这个广告位所属组ID的广告